<!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
相关推荐
总的来说,"星星闪烁"效果展示了H5开发中JavaScript、CSS3和DOM操作的综合运用,是提升用户体验和页面趣味性的一种有效手段。通过实践这个项目,开发者不仅能掌握基本的编程技巧,还能锻炼对动画效果的理解和实现...
发光闪烁圣诞树CSS3特效是一种利用CSS3的强大功能来实现的网页动态效果,它通过纯CSS3代码构建出一个生动的、闪烁的圣诞树图像,为网页增添节日氛围。这个特效不仅展示了CSS3的动画与过渡特性,还体现了对HTML元素的...
少儿编程scratch项目源代码文件案例素材-我的世界冒险通过 V5.zip
scratch少儿编程逻辑思维游戏源码-火星探测器.zip
少儿编程scratch项目源代码文件案例素材-炫酷音乐.zip
少儿编程scratch项目源代码文件案例素材-跳跃.zip
使用蚁群优化算法求解聚类问题.docx
少儿编程scratch项目源代码文件案例素材-像素小猫.zip
scratch少儿编程逻辑思维游戏源码-废料.zip
少儿编程scratch项目源代码文件案例素材-小绿人 demo.zip
房地产 -洪门湖 旅游项目一期落地方案 .pptx
scratch少儿编程逻辑思维游戏源码-经典版超级玛丽.zip
VID20250429210109.mp4
用Qt5.12.12写的一个计算24点的程序,输入4个任意数字用逗号分隔
少儿编程scratch项目源代码文件案例素材-我的世界 3D场景.zip
少儿编程scratch项目源代码文件案例素材-网格守卫者.zip
scratch少儿编程逻辑思维游戏源码-工厂逃生.zip
2022中德车联网(智能网联汽车)C-V2X量产应用研究报告_中国信息通信研究院&德国汽车工业协会
java基于ssm+jsp珠宝购物网站系统的毕业设计源码+论文