文字闪烁效果一
通过改变透明度来实现文字的渐变闪烁，代码如下：
文字闪烁：闪烁效果
如果不需要渐变闪烁效果，我们可以在keyframe动画中定义50%，50.1%的opacity的值。如下：@-webkit-keyframesblink{
0%{opacity:1;}
50%{opacity:1;}
50.01%{opacity:0;}
100%{opacity:0;}
}
文字闪烁效果二
通过设置text-shadow的值，来实现文字阴影闪烁的效果，代码如下：
闪烁效果
文字闪烁效果三
利用背景图片或者背景渐变，实现文字颜色的闪烁效果，代码如下：闪烁效果
.box{
display:inline-block;font-size:20px;margin:10px;background:linear-gradient(left,#f71605,#e0f513);
background:-webkit-linear-gradient(left,#f71605,#e0f513);background:-o-linear-gradient(right,#f71605,#e0f513);-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:scratchy0.253slinearforwardsinfinite;/*其它浏览器兼容性前缀*/
-webkit-animation:scratchy0.253slinearforwardsinfinite;-moz-animation:scratchy0.253slinearforwardsinfinite;-ms-animation:scratchy0.253slinearforwardsinfinite;-o-animation:scratchy0.253slinearforwardsinfinite;
}
@keyframesscratchy{
0%{background-position:00;
}
25%{background-position:00;
}
26%{background-position:20px-20px;
}
50%{background-position:20px-20px;
}
51%{background-position:40px-40px;
}
75%{background-position:40px-40px;
}
76%{background-position:60px-60px;
}
99%{background-position:60px-60px;
}
100%{background-position:00;
}
}/*添加兼容性前缀*/
@-webkit-keyframesscratchy{
0%{background-position:00;
}
25%{background-position:00;
}
26%{background-position:20px-20px;
}
50%{background-position:20px-20px;
}
51%{background-position:40px-40px;
}
75%{background-position:40px-40px;
}
76%{background-position:60px-60px;
}
99%{background-position:60px-60px;
}
100%{background-position:00;
}
}
@-moz-keyframesscratchy{
0%{background-position:00;
}
25%{background-position:00;
}
26%{background-position:20px-20px;
}
50%{background-position:20px-20px;
}
51%{background-position:40px-40px;
}
75%{background-position:40px-40px;
}
76%{background-position:60px-60px;
}
99%{background-position:60px-60px;
}
100%{background-position:00;
}
}
@-ms-keyframesscratchy{
0%{background-position:00;
}
25%{background-position:00;
}
26%{background-position:20px-20px;
}
50%{background-position:20px-20px;
}
51%{background-position:40px-40px;
}
75%{background-position:40px-40px;
}
76%{background-position:60px-60px;
}
99%{background-position:60px-60px;
}
100%{background-position:00;
}
}
@-o-keyframesscratchy{
0%{background-position:00;
}
25%{background-position:00;
}
26%{background-position:20px-20px;
}
50%{background-position:20px-20px;
}
51%{background-position:40px-40px;
}
75%{background-position:40px-40px;
}
76%{background-position:60px-60px;
}
99%{background-position:60px-60px;
}
100%{background-position:00;
}
}
