首页html加特林烟花代码

html加特林烟花代码

时间: 2024-02-23 15:55:13 浏览: 75

HTML中的加特林烟花效果可以通过CSS和JavaScript来实现。下面是一个简单的示例代码： HTML部分： ```html <!DOCTYPE html> <html> <head> <title>加特林烟花</title> <style> .firework { position: absolute; width: 10px; height: 10px; background-color: #ff0000; border-radius: 50%; } </style> </head> <body> <div id="container"></div> <script src="firework.js"></script> </body> </html> ``` JavaScript部分（firework.js）： ```javascript 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.getElementById('container').appendChild(firework); setTimeout(function() { firework.style.opacity = '0'; setTimeout(function() { firework.parentNode.removeChild(firework); }, 1000); }, 2000); } setInterval(createFirework, 500); ``` 这段代码会在页面上创建多个小圆点，模拟烟花效果。每隔500毫秒，会创建一个新的小圆点，并在2秒后逐渐消失。

阅读全文