这篇文章主要为大家详细介绍了html文字闪烁代码 css3文字闪烁效果 ，具有一定的参考价值，感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴。
文字闪烁效果一：
通过改变透明度来实现文字的渐变闪烁，代码如下：
文字闪烁：闪烁效果
.main{
color:#666;margin-top:50px;
}
/*定义keyframe动画，命名为blink*/
@keyframesblink{
0%{opacity:1;}
100%{opacity:0;}
}
/*添加兼容性前缀*/
@-webkit-keyframesblink{
0%{opacity:1;}
100%{opacity:0;}
}
@-moz-keyframesblink{
0%{opacity:1;}
100%{opacity:0;}
}
@-ms-keyframesblink{
0%{opacity:1;}
100%{opacity:0;}
}
@-o-keyframesblink{
0%{opacity:1;}
100%{opacity:0;}
}
/*定义blink类*/
.blink{
color:#dd4814;
animation:blink1slinearinfinite;
/*其它浏览器兼容性前缀*/
-webkit-animation:blink1slinearinfinite;
-moz-animation:blink1slinearinfinite;
-ms-animation:blink1slinearinfinite;
-o-animation:blink1slinearinfinite;
}
如果不需要渐变闪烁效果，我们可以在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;
}
}
小结:
以上361模板介绍的3中文字闪烁效果主要使用到css3的animation属性，大家可以直接复制使用，如果还有其他的闪烁效果，可以给361模板投稿哦！！
以上就是html文字闪烁代码 css3文字闪烁效果 的全部内容，希望对大家的学习和解决疑问有所帮助，也希望大家多多支持361模板网。
感谢打赏，我们会为大家提供更多优质资源！
