效果
分析
文字是从左到有慢慢呈现出来,不是整体消失和出现,那么肯定不能使用透明度。
我们可以想到渐变文字,然后通过改变背景的位置来控制文字的显示与隐藏。
渐变文字
渐变文字该如何实现呢?这是实现这个效果的关键步骤。
其实就是给文字设置渐变背景,然后将文字自身的颜色透明化,最后做一个背景裁切。
1 2 3 4 5 6 7 8 | h 1 { background-image : linear-gradient ( 90 deg, red , yellow, red , yellow, red ); color : transparent ; /* 背景被裁剪成文字的前景色。 */ background-clip : text; -webkit- background-clip : text; } <h 1 >一个爬坑的Coder</h 1 > |
进入正题
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | body { background-color : #000 ; display : flex ; justify-content : center ; align-items : center ; min-height : 100 vh; } h 1 { color : #fff ; font-size : 48px ; background-image : linear-gradient ( 75 deg, rgba ( 255 , 255 , 255 , 1 ) 0% , rgba ( 255 , 255 , 255 , 1 ) 33.3% , rgba ( 255 , 255 , 255 , 0 ) 66.67% , rgba ( 255 , 255 , 255 , 0 ) 100% ); /* 将背景渐变拉伸到3倍的长度 */ background-size : 300% 100% ; /* 0%的话就是被整个白色覆盖, 文字就显示出来 50%的话就在33.3% - 66.67%这段渐变色覆盖(白色渐变都透明色) 100%的话就是66.67% - 100% 这段透明色覆盖, 文字就透明了 */ /* 那我们只需要动态改变position: 100% -> 0%即可 */ background-position-x: 100% ; background-clip : text; -webkit- background-clip : text; color : transparent ; transition : background-position-x 2 s ease-in-out; } h 1: hover { background-position-x: 0% ; } <h 1 >一个爬坑的Coder</h 1 > |
到此这篇关于CSS实现苹果官网文字渐入效果的文章就介绍到这了,更多相关css文字渐入效果内容请搜索IT俱乐部以前的文章或继续浏览下面的相关文章,希望大家以后多多支持IT俱乐部!