首页跨年代码烟花代码html

跨年代码烟花代码html

时间: 2023-08-25 10:07:55 浏览: 87

以下是一个简单的烟花效果的 HTML 代码，可以用于跨年页面： ```html <!DOCTYPE html> <html> <head> <title>跨年烟花</title> <style> body { background-color: black; } #fireworks { position: absolute; width: 100%; height: 100%; top: 0; left: 0; overflow: hidden; } .firework { position: absolute; width: 10px; height: 10px; background-color: white; border-radius: 50%; } </style> </head> <body> <div id="fireworks"></div> <script> var fireworks = document.getElementById("fireworks"); function launchFirework() { var firework = document.createElement("div"); firework.classList.add("firework"); firework.style.left = Math.random() * 100 + "%"; firework.style.top = Math.random() * 100 + "%"; fireworks.appendChild(firework); setTimeout(function() { firework.style.opacity = "0"; setTimeout(function() { fireworks.removeChild(firework); }, 1000); }, 1000); } setInterval(launchFirework, 100); </script> </body> </html> ``` 代码中使用了一个绝对定位的 div 元素作为容器，每隔一段时间创建一个圆形的 div 元素作为烟花，并且随机设置它的位置。当烟花存在一定时间后，就将其逐渐变透明并从容器中移除。

阅读全文