Html
    Css
    Js

    
                        
.container {
	width:600px;
	margin:100px auto 0;
}
button {
	font-family:'Audiowide';
	text-align:center;
	color:#00a67c;
	font-size:7em;
	-webkit-transition:all 1.5s ease;
	transition:all 1.5s ease;
}
button:hover {
	color:#fff;
	-webkit-animation:Glow 1.5s ease infinite alternate;
	animation:Glow 1.5s ease infinite alternate;
}
@-webkit-keyframes Glow {
	from {
	text-shadow:0 0 10px #fff,0 0 20px #fff,0 0 30px #fff,0 0 40px #00a67c,0 0 70px #00a67c,0 0 80px #00a67c,0 0 100px #00a67c,0 0 150px #00a67c;
}
to {
	text-shadow:0 0 5px #fff,0 0 10px #fff,0 0 15px #fff,0 0 20px #00a67c,0 0 35px #00a67c,0 0 40px #00a67c,0 0 50px #00a67c,0 0 75px #00a67c;
}
}@keyframes Glow {
	from {
	text-shadow:0 0 10px #fff,0 0 20px #fff,0 0 30px #fff,0 0 40px #00a67c,0 0 70px #00a67c,0 0 80px #00a67c,0 0 100px #00a67c,0 0 150px #00a67c;
}
to {
	text-shadow:0 0 5px #fff,0 0 10px #fff,0 0 15px #fff,0 0 20px #00a67c,0 0 35px #00a67c,0 0 40px #00a67c,0 0 50px #00a67c,0 0 75px #00a67c;
}
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

纯css文本动画效果

0