首页用html写一个烟花页面

用html写一个烟花页面

时间: 2023-05-16 18:05:46 浏览: 113

用html写的烟花，过年过节、哄女朋友都可以用

5星 · 资源好评率100%

用html写的烟花，过年过节、哄女朋友都可以用

非常感谢您的提问！以下是一个简单的 HTML 代码，可以实现一个烟花页面： ```html <!DOCTYPE html> <html> <head> <title>烟花页面</title> <style> body { background-color: black; } .firework { position: absolute; width: 10px; height: 10px; border-radius: 50%; background-color: white; animation: explode 1s ease-out; } @keyframes explode { 0% { transform: scale(0); } 100% { transform: scale(20); opacity: 0; } } </style> </head> <body> <script> function createFirework() { var firework = document.createElement('div'); firework.className = 'firework'; firework.style.left = Math.random() * window.innerWidth + 'px'; firework.style.top = Math.random() * window.innerHeight + 'px'; document.body.appendChild(firework); setTimeout(function() { document.body.removeChild(firework); }, 1000); } setInterval(createFirework, 500); </script> </body> </html> ``` 这个页面会在黑色背景上不断出现烟花，每个烟花会在随机位置爆炸并消失。希望这个代码能够帮到您！

阅读全文