首页html新年快乐烟花特效

html新年快乐烟花特效

时间: 2024-02-09 18:05:23 浏览: 138

以下是一个简单的HTML代码，实现了新年快乐烟花特效： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>新年快乐烟花特效</title> <style> .firework { position: absolute; width: 10px; height: 10px; background-color: red; border-radius: 50%; animation: explode 1s infinite; } @keyframes explode { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(5); opacity: 0; } } </style> </head> <body> <script> function createFirework() { var firework = document.createElement("div"); firework.className = "firework"; firework.style.left = Math.random() * 100 + "%"; firework.style.animationDuration = Math.random() * 2 + 1 + "s"; document.body.appendChild(firework); setTimeout(function() { document.body.removeChild(firework); }, 2000); } setInterval(createFirework, 500); </script> </body> </html> ``` 这段代码使用了HTML、CSS和JavaScript来实现烟花特效。通过创建一个div元素，并设置其样式和动画效果，然后在页面中定时创建和移除这些div元素，从而实现了烟花特效。

阅读全文