css3 文字闪动效果

时间:2023-07-22 18:07:26

<div id="container">
这里查看“<span class="blink">闪烁效果</span>”,ENjoy!
</div>

/* 定义keyframe动画,命名为blink */

@keyframes blink{
0%{opacity: 1;}
50%{opacity: 1;}
50.01%{opacity: 0;} /* 注意这里定义50.01%立刻透明度为0,可以设置闪烁效果 */
100%{opacity: 0;}
} /* 添加兼容性前缀 */ @-webkit-keyframes blink {
0% { opacity: 1; }
50% { opacity: 1; }
50.01% { opacity: 0; }
100% { opacity: 0; }
} @-moz-keyframes blink {
0% { opacity: 1; }
50% { opacity: 1; }
50.01% { opacity: 0; }
100% { opacity: 0; }
} @-ms-keyframes blink {
0% { opacity: 1; }
50% { opacity: 1; }
50.01% { opacity: 0; }
100% { opacity: 0; }
} @-o-keyframes blink {
0% { opacity: 1; }
50% { opacity: 1; }
50.01% { opacity: 0; }
100% { opacity: 0; }
} /* 定义blink类*/
.blink{
animation: blink .75s linear infinite;
/* 其它浏览器兼容性前缀 */
-webkit-animation: blink .75s linear infinite;
-moz-animation: blink .75s linear infinite;
-ms-animation: blink .75s linear infinite;
-o-animation: blink .75s linear infinite;
color: #dd4814;
}