首页2023跨年烟花代码html

2023跨年烟花代码html

时间: 2024-01-01 15:05:03 浏览: 90

以下是一个简单的HTML代码示例，用于创建2023跨年烟花效果： ```html <!DOCTYPE html> <html> <head> <title>2023跨年烟花</title> <style> body { background-color: black; } .firework { position: absolute; width: 10px; height: 10px; background-color: #fff; border-radius: 50%; animation: explode 1s infinite; } @keyframes explode { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(5); opacity: 0; } } </style> </head> <body> <script> function createFirework() { const firework = document.createElement('div'); firework.className = 'firework'; firework.style.left = Math.random() * 100 + 'vw'; firework.style.top = Math.random() * 100 + 'vh'; document.body.appendChild(firework); setTimeout(() => { firework.remove(); }, 1000); } setInterval(createFirework, 200); </script> </body> </html> ``` 这段代码使用HTML和CSS创建了一个简单的烟花效果。通过JavaScript动态地在页面上创建和移除烟花元素，从而实现烟花的爆炸效果。你可以将这段代码保存为一个HTML文件，然后在浏览器中打开，即可看到2023跨年烟花效果。

阅读全文