IT源码网

css动画 文字闪烁效果讲解

lxf 2020年02月19日 Web前端 378 0

/*定义页面基础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%立刻透明度为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;
}

 

 

 

 

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

发布评论

分享到:

IT源码网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

CSS制作图形速查表讲解
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。