html语言文字闪烁,html+CSS3实现的文字闪烁特效

闪烁字体效果

/* 定义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;

}

这里是闪烁字体