首页浪漫烟花html代码

浪漫烟花html代码

时间: 2024-01-30 11:02:35 浏览: 97

很高兴为您解答。以下是一个浪漫烟花的HTML代码示例： ```html <!DOCTYPE html> <html> <head> <title>浪漫烟花</title> <style> body { background-color: black; } .firework { position: absolute; width: 10px; height: 10px; background-color: #ffcc00; border-radius: 50%; animation: explode 1s infinite; } @keyframes explode { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(10); opacity: 0; } } </style> </head> <body> <script> function createFirework() { var firework = document.createElement("div"); firework.className = "firework"; firework.style.left = Math.random() * 100 + "%"; firework.style.top = Math.random() * 100 + "%"; document.body.appendChild(firework); setTimeout(function() { document.body.removeChild(firework); }, 1000); } setInterval(createFirework, 200); </script> </body> </html> ``` 这段代码会在黑色背景的页面上产生一系列黄色的烟花效果。每200毫秒，会创建一个烟花元素，并在随机位置绽放，然后在1秒后消失。

阅读全文