首页使用html写个元旦快乐代码有烟花爆竹特效

使用html写个元旦快乐代码有烟花爆竹特效

时间: 2023-02-07 16:33:14 浏览: 162

你好！以下是使用 HTML 写出的一个元旦快乐的代码，带有烟花爆竹特效： ``` <html> <head> <style> body { background-color: black; text-align: center; } .firework { width: 10px; height: 10px; border-radius: 50%; background-color: white; position: absolute; animation: explode 1s ease-out; } @keyframes explode { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-1000px); opacity: 0; } } .firework.red { background-color: red; } .firework.yellow { background-color: yellow; } .firework.blue { background-color: blue; } .firecracker { width: 20px; height: 20px; border: 1px solid black; border-radius: 50%; background-color: white; position: absolute; animation: cracker 1s ease-out; } @keyframes cracker { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-1000px); opacity: 0; } } </style> </head> <body> <h1 style="color: white;">元旦快乐！</h1> <div id="fireworks"></div> <script> const colors = ["red", "yellow", "blue"]; function createFirework() { const firework = document.createElement("div"); firework.classList.add("firework"); const color = colors[Math.floor(Math.random() * 3)]; firework.classList.add(color); firework.style.left = Math.random() * 100 + "%"; document.getElementById("fireworks").appendChild(firework); } function createFirecracker() { const firecracker = document.createElement("div"); firecracker.classList.add("firecracker"); firecracker.style.left = Math.random() * 100 + "%"; document.getElementById("fireworks").appendChild(firecracker); } setInterval(createFirework, 500); setInterval(createFirecracker, 750); </script> </body> </html> ``` 这段代码会在黑色的背景上显示一个 "元旦快乐！" 的标题，并不断地生成红

阅读全文