H5 CSS3 @keyframes 文字一闪一闪提示
<!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
相关推荐
opspider 2020-06-28
ZHANGRENXIANG00 2020-06-28
明瞳 2020-06-10
lanzhusiyu 2020-06-09
HSdiana 2020-06-03
PengQ 2020-05-26
lengyu0 2020-05-20
HSdiana 2020-05-11
haidaoxianzi 2020-04-18
PioneerFan 2020-04-09
HSdiana 2020-03-28
百年da孤独 2020-03-27
lwb 2020-03-26
haocxy 2020-03-08
spinachcqb 2020-03-06
柳永法的个人 2020-02-13
qsdnet我想学编程 2020-01-29
wwwxuewen 2020-01-19