首页烟花html网页代码

烟花html网页代码

时间: 2023-11-29 11:06:09 浏览: 115

以下是一个简单的烟花HTML网页代码，它使用了JavaScript和CSS来创建烟花效果： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>烟花效果</title> <style> body { background-color: black; } #firework { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 10px; height: 10px; border-radius: 50%; background-color: white; animation: explode 1s ease-out forwards; } @keyframes explode { 0% { transform: scale(0); } 50% { transform: scale(1.5); opacity: 1; } 100% { transform: scale(2); opacity: 0; } } </style> </head> <body> <div id="firework"></div> <script> function createFirework() { var firework = document.createElement('div'); firework.style.left = Math.random() * 100 + '%'; firework.style.top = Math.random() * 100 + '%'; document.body.appendChild(firework); setTimeout(function() { firework.remove(); }, 1000); } setInterval(createFirework, 500); </script> </body> </html> ``` 这个代码会在页面中创建一个小白点，然后每隔500毫秒就会在随机位置创建一个新的小白点，最终形成烟花效果。你可以将这个代码复制到一个HTML文件中并在浏览器中打开它来查看效果。

阅读全文