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