首页html烟花特效代码可用

html烟花特效代码可用

时间: 2023-09-21 19:03:42 浏览: 214

当然可以！以下是一个简单的HTML烟花特效代码示例： ```html <!DOCTYPE html> <html> <head> <style> @keyframes fireworks { 0% {background-color: red;} 25% {background-color: yellow;} 50% {background-color: blue;} 75% {background-color: green;} 100% {background-color: purple;} } .firework { width: 10px; height: 10px; position: absolute; } </style> </head> <body> <script> function createFirework() { var firework = document.createElement("div"); firework.className = "firework"; firework.style.top = Math.random() * window.innerHeight + "px"; firework.style.left = Math.random() * window.innerWidth + "px"; document.body.appendChild(firework); } setInterval(createFirework, 1000); setInterval(function() { var fireworks = document.getElementsByClassName("firework"); for (var i = 0; i < fireworks.length; i++) { fireworks[i].style.animation = "fireworks 1s infinite"; fireworks[i].addEventListener("animationend", function() { this.parentNode.removeChild(this); }); } }, 1000); </script> </body> </html> ``` 这段代码会在页面上生成一系列彩色的烟花效果。每秒钟会随机生成一个新的烟花，并且每个烟花都会以动画的形式显示，持续1秒钟后消失。你可以将这段代码复制到一个HTML文件中，然后在浏览器中打开该文件，就可以看到烟花特效了。

阅读全文