首页好玩的html烟花代码

好玩的html烟花代码

时间: 2023-10-21 10:05:01 浏览: 112

以下是一个简单的 HTML 烟花效果代码： ```html <!DOCTYPE html> <html> <head> <style> body { margin: 0; padding: 0; } #firework { position: absolute; width: 5px; height: 5px; background-color: red; border-radius: 50%; animation: firework 1s infinite; } @keyframes firework { 0% { opacity: 1; } 100% { opacity: 0; } } </style> </head> <body> <div id="firework"></div> <script> function createFirework() { const firework = document.createElement('div'); firework.classList.add('firework'); firework.style.left = Math.random() * window.innerWidth + 'px'; document.body.appendChild(firework); setTimeout(() => { firework.remove(); }, 1000); } setInterval(() => { createFirework(); }, 500); </script> </body> </html> ``` 此代码会在页面上创建一系列红色小圆点，模拟烟花效果。每隔 0.5 秒，会生成一个新的烟花并在 1 秒后消失。

阅读全文