<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>H5 CSS3 @keyframes text flashing prompt</title>
</head>
<body>
<style type="text/css">
p{
width:210px;
height:30px;
line-height:30px;
color:#ff5050;
text-align:center;
margin:40px auto;
}
/**
* Here's how @keyframes are used
* -webkit-animation:playBox's playBox is to call this function
* @-webkit-keyframes playBox where playBox is the name of the function
* */
.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">Reading who asks you to recite, the water falls and the fragrance floats. </p>
</body>
</html>
Effect picture:
You can refer to this link to know more about the usage of @keyframes
http://www.runoob.com/cssref/css3-pr-animation-keyframes.html