作者:pbird | 来源:互联网 | 2018-03-01 10:22
1<!DOCTYPEhtml>2<htmllang"en">3<head>4<metacharset"utf-8">5<style>6.shadow{7text-align:center;
1 2 3 4 5 34 35 36 文字向右闪过效果
37 38
一、直接上代码!下面这是效果图:
三、来啦来啦!(敲黑板) 我觉得代码注释已经比较清楚了,所以画画重点就好了!!!
1、infinite 这是循环执行的属性,有了它,才能一闪一闪滴!
2、-webkit-text-fill-color: transparent; 文字填充颜色为透明,没有设置的话,看不出白色渐变划过效果的!
3、-webkit-background-clip: text; 把文本内容之外的背景给裁剪掉,如果不加,文字显示不出来,只显示渐变的颜色!
4、color-stop() 渐变的color-stop 函数,表示渐变的位置和颜色,就是它,我们才能想在哪里渐变就哪里渐变,再让它移动起来,就出现一闪一闪的效果了!
四、最后,说一下思路:
首先,设置一个中间白色、两边灰色的渐变背景色;
其次,文字填充颜色设为透明(才能看到白色背景);
接着,把文字之外的背景色给裁剪掉(只显示文字);
最后,用@keyframes,让背景白色位置循环从左到右执行。
如果还有任何问题,欢迎留言哈!!!
以上就是分享一个css特效--向右循环闪过的详细内容,更多请关注 第一PHP社区 其它相关文章!