css动画 文字闪烁效果

/*定义页面基础CSS*/

body{
font-family: 'microsoft yahei',Arial,sans-serif;
color: #EFEFEF;
background: #222;
text-align: center;
margin-top: 50px;
}

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

@keyframes blink{
0%{opacity: 1;}
50%{opacity: 1;}
50.01%{opacity: 0;} /* 注意这里定义50.01%立刻透明度为０，可以设置闪烁效果 */
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;
}

 

 

 

 

原文链接：http://www.gbtags.com/gb/rtreplayerpreview/38.htm#replayzone

转载于:https://www.cnblogs.com/weibo806/p/7722420.html