首页html css烟花绽放源代码

html css烟花绽放源代码

时间: 2024-11-26 09:06:04 浏览: 64

HTML 和 CSS 结合可以创建动态效果，如烟花绽放。下面是一个简单的 HTML 和 CSS 代码片段，展示如何模拟烟花绽放在网页上： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> /* 烟花样式 */ .firework { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 10px; height: 10px; border-radius: 50%; background-color: #fff; opacity: 0; animation: burst 4s ease infinite; } @keyframes burst { 0% {top: 50%; opacity: 0;} 50% {top: 60%; opacity: 1;} 100% {top: 70%; opacity: 0;} } </style> </head> <body>  <div class="firework" onclick="createFirework()"></div> <script> function createFirework() { // 创建新元素并添加到页面 var newFirework = document.createElement('div'); newFirework.classList.add('firework'); document.body.appendChild(newFirework); // 延迟一段时间再删除旧的烟花 setTimeout(function() { document.querySelector('.firework').remove(); }, 4000); } </script> </body> </html> ``` 这个代码会创建一个初始不可见的圆形“烟花”，当用户点击页面时，会在中心位置随机位置创建一个新的烟花，并立即开始动画。每个烟花在动画结束后会被移除，以便看起来像是连续绽放。

阅读全文