首页html代码烟花特效

html代码烟花特效

时间: 2024-01-08 11:03:40 浏览: 82

以下是一个使用HTML和JavaScript实现的烟花特效的示例代码： ```html <!DOCTYPE html> <html> <head> <title>烟花特效</title> <style> body { background-color: black; overflow: hidden; } #fireworks { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } </style> </head> <body> <div id="fireworks"></div> <script> // 创建烟花 function createFirework() { var firework = document.createElement('div'); firework.className = 'firework'; firework.style.left = Math.random() * 100 + '%'; firework.style.top = Math.random() * 100 + '%'; firework.style.backgroundColor = getRandomColor(); document.getElementById('fireworks').appendChild(firework); setTimeout(function() { firework.parentNode.removeChild(firework); }, 2000); } // 随机生成颜色 function getRandomColor() { var letters = '0123456789ABCDEF'; var color = '#'; for (var i = 0; i < 6; i++) { color += letters[Math.floor(Math.random() * 16)]; } return color; } // 每隔一段时间创建一个烟花 setInterval(createFirework, 500); </script> </body> </html> ``` 这段代码会在页面上创建多个随机颜色的烟花，每隔0.5秒创建一个新的烟花，并在2秒后将其移除。

阅读全文