转载自：/article/detial/616
文字闪烁效果一：
通过改变透明度来实现文字的渐变闪烁，效果如下：
文字带渐变效果的闪烁：
<div class="main">文字闪烁：<span class="blink">闪烁效果</span></div><style type="text/css">.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;}</style>
如果不需要渐变闪烁效果，我们可以在keyframe动画中定义50%，50.1%的opacity的值。如下：
@-webkit-keyframes blink {0% { opacity: 1; }50% { opacity: 1; }50.01% { opacity: 0; }100% { opacity: 0; }}
这样的效果：
文字不渐变闪烁：闪烁效果
文字闪烁效果二：
通过设置text-shadow的值，来实现文字阴影闪烁的效果，效果如下：
闪烁效果
代码如下：
<div class="box">闪烁效果</div><style> .box{ font-size: 20px; color:#4cc134; margin: 10px;animation: changeshadow 1s ease-in infinite ;/* 其它浏览器兼容性前缀 */-webkit-animation: changeshadow 1s linear infinite;-moz-animation: changeshadow 1s linear infinite;-ms-animation: changeshadow 1s linear infinite;-o-animation: changeshadow 1s linear infinite;} @keyframes changeshadow { 0%{ text-shadow: 0 0 4px #4cc134} 50%{ text-shadow: 0 0 40px #4cc134} 100%{ text-shadow: 0 0 4px #4cc134} }/* 添加兼容性前缀 */@-webkit-keyframes changeshadow {0%{ text-shadow: 0 0 4px #4cc134} 50%{ text-shadow: 0 0 40px #4cc134} 100%{ text-shadow: 0 0 4px #4cc134} }@-moz-keyframes changeshadow {0%{ text-shadow: 0 0 4px #4cc134} 50%{ text-shadow: 0 0 40px #4cc134} 100%{ text-shadow: 0 0 4px #4cc134} }@-ms-keyframes changeshadow {0%{ text-shadow: 0 0 4px #4cc134} 50%{ text-shadow: 0 0 40px #4cc134} 100%{ text-shadow: 0 0 4px #4cc134} }@-o-keyframes changeshadow {0%{ text-shadow: 0 0 4px #4cc134} 50%{ text-shadow: 0 0 40px #4cc134} 100%{ text-shadow: 0 0 4px #4cc134} }</style>
文字闪烁效果三：
利用背景图片或者背景渐变，实现文字颜色的闪烁效果，效果如下：
闪烁效果
代码如下：
<span class="box">闪烁效果</span><style> .box{ display: inline-block;font-size: 20px;margin: 10px;background: linear-gradient(left, #f71605, #e0f513); background: -webkit-linear-gradient(left, #f71605, #e0f513);background: -o-linear-gradient(right, #f71605, #e0f513);-webkit-background-clip: text;-webkit-text-fill-color: transparent;animation:scratchy 0.253s linear forwards infinite;/* 其它浏览器兼容性前缀 */-webkit-animation:scratchy 0.253s linear forwards infinite;-moz-animation: scratchy 0.253s linear forwards infinite;-ms-animation: scratchy 0.253s linear forwards infinite;-o-animation: scratchy 0.253s linear forwards infinite;} @keyframes scratchy {0% {background-position: 0 0;}25% {background-position: 0 0;}26% {background-position: 20px -20px;}50% {background-position: 20px -20px;}51% {background-position: 40px -40px;}75% {background-position: 40px -40px;}76% {background-position: 60px -60px;}99% {background-position: 60px -60px;}100% {background-position: 0 0;}}/* 添加兼容性前缀 */@-webkit-keyframes scratchy {0% {background-position: 0 0;}25% {background-position: 0 0;}26% {background-position: 20px -20px;}50% {background-position: 20px -20px;}51% {background-position: 40px -40px;}75% {background-position: 40px -40px;}76% {background-position: 60px -60px;}99% {background-position: 60px -60px;}100% {background-position: 0 0;}}@-moz-keyframes scratchy {0% {background-position: 0 0;}25% {background-position: 0 0;}26% {background-position: 20px -20px;}50% {background-position: 20px -20px;}51% {background-position: 40px -40px;}75% {background-position: 40px -40px;}76% {background-position: 60px -60px;}99% {background-position: 60px -60px;}100% {background-position: 0 0;}}@-ms-keyframes scratchy {0% {background-position: 0 0;}25% {background-position: 0 0;}26% {background-position: 20px -20px;}50% {background-position: 20px -20px;}51% {background-position: 40px -40px;}75% {background-position: 40px -40px;}76% {background-position: 60px -60px;}99% {background-position: 60px -60px;}100% {background-position: 0 0;}}@-o-keyframes scratchy {0% {background-position: 0 0;}25% {background-position: 0 0;}26% {background-position: 20px -20px;}50% {background-position: 20px -20px;}51% {background-position: 40px -40px;}75% {background-position: 40px -40px;}76% {background-position: 60px -60px;}99% {background-position: 60px -60px;}100% {background-position: 0 0;}}</style>
