html庆祝六一烟花和字音效

HTML庆祝六一烟花和字音效可以通过CSS3动画来实现，以下是一个示例代码： ``` <!DOCTYPE html> <html> <head> <style> .textfx { animation-name: celebratetext; animation-duration: 3s; animation-iteration-count: infinite; } @keyframes celebratetext { 0% { color: #FFA07A; text-shadow: 0 0 10px #FFA07A, 0 0 20px #FFA07A, 0 0 30px #FFA07A, 0 0 40px #FFA07A, 0 0 50px #FFA07A, 0 0 60px #FFA07A; } 25% { color: #FF4500; text-shadow: 0 0 10px #FF4500, 0 0 20px #FF4500, 0 0 30px #FF4500, 0 0 40px #FF4500, 0 0 50px #FF4500, 0 0 60px #FF4500; transform: rotateY(360deg); transform-style: preserve-3d; } 50% { color: #FFD700; text-shadow: 0 0 10px #FFD700, 0 0 20px #FFD700, 0 0 30px #FFD700, 0 0 40px #FFD700, 0 0 50px #FFD700, 0 0 60px #FFD700; transform: rotateX(360deg); transform-style: preserve-3d; text-stroke: 1px #FFD700; -webkit-text-stroke-width:1px; -webkit-text-stroke-color:#000000; animation-name: celebratetextshadow; animation-duration: .5s; animation-iteration-count: infinite; animation-direction: alternate-reverse; animation-timing-function: ease-in-out; animation-fill-mode: forwards; box-shadow: inset -10px -10px rgba(255,255,255,.5), inset -15px -15px rgba(255,255,255,.2), inset -5px -5px rgba(255,255,255,.2), inset -5px -5px rgba(255,255,255,.5), inset -2px -2px rgba(255,255,255,.2), inset -2px -2px rgba(255,255,255,.5), inset -2px -2px rgba(255,255,255,.5), inset -2px -2px rgba(255,255,255,.2); text-shadow: none; outline: none; background-image: radial-gradient(#FFE400,#FD8D00); border-radius: .5em; font-size: x-large; filter: drop-shadow(-1px -1px #FBFBFB) drop-shadow(1px -1px #FBFBFB) drop-shadow(-1px 1px #FBFBFB) drop-shadow(1px 1px #FBFBFB); transition: all .25s ease-in-out; cursor: pointer; user-select:none; animation-name: celebratetextshadow; animation-duration: .5s; animation-iteration-count: infinite; animation-direction: alternate-reverse; animation-timing-function: ease-in-out; animation-fill-mode: forwards; box-shadow: inset -10px -10px rgba(255,255,255,.5), inset -15px -15px rgba(255,255,255,.2), inset -5px -5px rgba(255,255,255,.2), inset -5px -5px rgba(255,255,255,.5), inset -2px -2px rgba(255,255,255,.2), inset -2px -2px rgba(255,255,255,.5), inset -2px -2px rgba(255,255,255,.5), inset -2px -2px rgba(255,255,255,.2); text-shadow: none; outline: none; background-image: radial-gradient(#FFE400,#FD8D00); border-radius: .5em; font-1px 1px #FBFBFB) drop-shadow(1px 1px #FBFBFB); transition: all .25s ease-in-out; cursor: pointer; user-select:none; animation-name: celebratetextshadow; animation-duration: .5s; animation-iteration-count: infinite; animation-direction: alternate-reverse; animation-timing-function: ease-in-out; animation-fill-mode: forwards; box-shadow: inset -10px -10px rgba(255,255,255,.5), inset -15px -15px rgba(255,255,255,.2), inset -5px -5px rgba(255,255,255,.2), inset -5px -5px rgba(255,255,255,.5), inset -2px -2px rgba(255,255,255,.2), inset -2px -2px rgba(255,255,255,.5), inset -2px -2px rgba(255,255,255,.5), inset -2px -2px rgba(255,255,255,.2); text-shadow: none; outline: none; background-image: radial-gradient(#FFE400,#FD8D00); border-radius: .5em; font-size: x-large; filter: drop-shadow(-1px -1px #FBFBFB) drop-shadow(1px -1px #FBFBFB) drop-shadow(-1px 1px #FBFBFB) drop-shadow(1px 1px #FBFBFB); transition: all .25s ease-in-out; cursor: pointer; user-select:none; } .firework { width :10em;height :10em;border-radius :50%;background :#fff;box-shadow :inset-3em-3em-4em-#ddd,inset3em3em4em-#ccc;position:absolute;left :50%;top :50%;animation-name :explode;animation-duration :.4s;animation-delay :.7s;animation-timing-function :ease-out} @keyframes explode{to{opacity :0;transform :scale3d(15,15,15)}} .firework:before, .firework:after { content :''; width :3em;height :3em;border-radius :50%;position:absolute} .firework:before{background:#f00;left:-4em;top:-4em} .firework:before:hover {animation-name :explode;animation-duration :.8s;animation-timing-function :ease-out} .firework:before:focus {outline:none} .firework:before{background:#f00;left:-4em;top:-4em} .firework:before:hover {animation-name :explode;animation-duration :.8s;animation-timing-function :ease-out} .firework:before:focus {outline:none} .firework2 { width :10em;height :10em;border-radius :50%;background :#fff;box-shadow :inset-3em-3em-4em-#ddd,inset3em3em4em-#ccc;position:absolute;left :50%;top :50%;animation-name :explode;animation-duration :.4s;animation-delay :.7s;animation-timing-function :ease-out} @keyframes explode{to{opacity :0;transform :scale3d(15,15,15)}} .firework2:before, .firework2:after { content :''; width :3em;height :3em;border-radius :50%;position:absolute} .firework2:before{background:#f00;left:-4em;top:-4em} .firework2:before:hover {animation-name :explode;animation-duration :.8s;animation-timing-function :ease-out} .firework2:before:focus {outline:none} .firework2:before{background:#f00;left:-4em;top:-4em} .firework2:before:hover {animation-name :explode;animation-duration :.8s;animation-timing-function :ease-out} .firework2:before:focus {outline:none} </style> </head> <body> <h1 class="textfx">六一快乐！</h1> <div class="firework"></div> <div class="firework"></div> <div class="firework"></div> <div class="firework"></div> <div class="firework"></div> <div class="firework2"></div> <div class="firework2"></div> <div class="firework2"></div> <div class="firework2"></div> <div class="firework2"></div> </body> </html> ``` 该代码实现了一个文本特效和两种不同的烟花效果。您可以将代码复制到HTML文件中并在浏览器中查看效果。相关问题: 1. 如何使用CSS3实现动画效果？ 2. 如何在HTML中添加特效？ 3. 如何使用CSS3制作烟花效果？

阅读全文

html庆祝六一烟花和字音效

相关推荐

HTML5庆祝生日蛋糕烟花特效

HTML5 Canvas酷炫烟花庆祝动画特效

HTML5庆祝2018年烟花动画特效特效代码

html烟花代码带音效

烟花代码html音效

纯html烟花庆祝生日

python 烟花庆祝生日

python烟花庆祝

用HTML写一份庆祝元旦的网页

html 爱心表白烟花

生日快乐html烟花

html烟火动态代码

六一儿童节烟花c++

生日快乐html网页 烟花

html生日快乐烟花源码

烟花 html 源码 免费

html教师节烟花动画源码

html简单爱心烟花特效代码

html生日蛋糕烟花源码

HTML烟花动态代码

最新推荐

audit-libs-static-2.8.5-4.el7.i686.rpm.zip

Angular程序高效加载与展示海量Excel数据技巧

管理建模和仿真的文件

【SecureCRT高亮技巧】：20年经验技术大佬的个性化设置指南

如何设计一个基于FPGA的多功能数字钟，实现24小时计时、手动校时和定时闹钟功能？

Argos客户端开发流程及Vue配置指南

"互动学习：行动中的多样性与论文攻读经历"

【SecureCRT高亮规则深度解析】：让日志输出一目了然的秘诀

在用友U8 UFO报表系统中，如何通过格式管理功能实现报表的格式与样式自定义？

基于源码的PHP Webshell审查工具介绍

生日快乐html网页烟花

烟花 html 源码免费