今天给大家分享几个文字闪烁特效代码，纯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; }