文字闪烁效果一：

通过改变透明度来实现文字的渐变闪烁，效果如下：

代码：

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>