首页2024跨年烟花代码HTML

2024跨年烟花代码HTML

时间: 2023-12-31 09:25:03 浏览: 740

以下是一个简单的2024跨年烟花代码的HTML示例： ```html <!DOCTYPE html> <html> <head> <style> .firework { position: absolute; width: 10px; height: 10px; border-radius: 50%; background-color: #ff0000; animation: explode 1s infinite; } @keyframes explode { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(5); 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); } setInterval(createFirework, 100); </script> </body> </html> ``` 这段代码创建了一个简单的烟花效果。它使用CSS的`transform`和`animation`属性来控制烟花的形状和动画效果。通过JavaScript的`setInterval`函数，每100毫秒就会创建一个新的烟花元素，并将其添加到页面中。

阅读全文