首页html5烟花特效代码

html5烟花特效代码

时间: 2024-01-09 21:02:18 浏览: 137

HTML5烟花特效可以通过使用CSS和JavaScript来实现。以下是一个简单的示例代码： HTML部分： ``` <!DOCTYPE html> <html> <head> <title>烟花特效</title> <style> #fireworks { position: relative; } .firework { width: 10px; height: 10px; background-color: #f00; border-radius: 50%; position: absolute; animation: explode 1s; } @keyframes explode { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(10); opacity: 0; } } </style> </head> <body> <div id="fireworks"></div> <script> function launchFirework() { var firework = document.createElement("div"); firework.classList.add("firework"); var leftPos = Math.random() * window.innerWidth; var topPos = Math.random() * window.innerHeight; firework.style.left = leftPos + "px"; firework.style.top = topPos + "px"; document.getElementById("fireworks").appendChild(firework); setTimeout(function () { firework.remove(); }, 1000); } setInterval(launchFirework, 100); </script> </body> </html> ``` 这段代码首先在页面中添加了一个空的`<div>`元素，用于容纳烟花图案。接着使用CSS定义了烟花的样式和动画效果。`.firework`类规定了烟花的样式，包括大小、背景色和圆角等。`@keyframes`定义了动画效果，让烟花从初始状态到爆炸效果的变化过程。 JavaScript部分定义了`launchFirework()`函数，用于创建并发射烟花。在函数中，首先创建一个新的`<div>`元素，添加上`.firework`类，然后通过随机计算`left`和`top`属性值，将其定位在页面上的随机位置。将其添加到`<div id="fireworks">`中。最后，使用`setInterval()`函数来不断调用`launchFirework()`函数，实现不断产生新烟花的效果。通过设置适当的时间间隔和延迟，实现烟花效果会继续消失。

阅读全文