首页html网页表白代码烟花

html网页表白代码烟花

时间: 2023-12-26 21:27:46 浏览: 111

以下是一个使用HTML、CSS和JavaScript实现的烟花效果的网页表白代码： ```html <!DOCTYPE html> <html> <head> <title>烟花表白</title> <style> body { background-color: black; overflow: hidden; } #fireworks { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .firework { position: absolute; width: 10px; height: 10px; background-color: #f00; border-radius: 50%; animation: explode 1s forwards; } @keyframes explode { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(10); opacity: 0; } } </style> </head> <body> <div id="fireworks"></div> <script> function createFirework() { var firework = document.createElement('div'); firework.className = 'firework'; firework.style.left = Math.random() * 100 + 'vw'; firework.style.animationDuration = Math.random() * 2 + 1 + 's'; document.getElementById('fireworks').appendChild(firework); } setInterval(createFirework, 500); </script> </body> </html> ``` 这段代码会在网页中创建一个黑色背景，并在页面中央以随机的时间间隔和位置生成烟花效果。每个烟花会以动画的形式从小到大扩散，并最终消失。请注意，这段代码只是一个简单的示例，你可以根据自己的需求进行修改和美化。

阅读全文