<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>H5 CSS3 @keyframes 文字一闪一闪提示</title>
</head>
<body>
<style type="text/css">
p{
width:210px;
height:30px;
line-height:30px;
color:#ff5050;
text-align:center;
margin:40px auto;
}
/**
* 下面是 @keyframes 的使用方式
* -webkit-animation:playBox 的 playBox 是调用该函数
* @-webkit-keyframes playBox 的 playBox 是函数的名称
* */
.box{
-webkit-animation:playBox 1.0s infinite;
}
@-webkit-keyframes playBox{
0%{text-decoration:none; background:#ffdcdc;}
50%{text-decoration:none; background:#ffdcdc;}
51%{text-decoration:underline; background:#e9c8c8;}
100%{text-decoration:underline; background:#e9c8c8;}
}
</style>
<p class="box">阅谁问君诵,水落清香浮。</p>
</body>
</html>
效果图:
可以参考一下这条链接,知道更多关于@keyframes的用法
http://www.runoob.com/cssref/css3-pr-animation-keyframes.html