H5 CSS3 @keyframes 文字一闪一闪提示
程序员文章站
2024-01-25 10:38:16
...
<!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
上一篇: 在Word2003文档窗口中改变显示比例
下一篇: phpcms 这么条件的栏目怎样调用呢