首页2022新年烟花代码html

2022新年烟花代码html

时间: 2024-01-01 21:02:36 浏览: 88

<!DOCTYPE html> <html> <head> <title>2022新年烟花</title> <style> .firework { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: #FFD700; animation: explode 1s linear infinite; } @keyframes explode { 50% { transform: scale(3); opacity: 0; } } </style> </head> <body> <script> function createFirework() { const firework = document.createElement('div'); firework.className = 'firework'; firework.style.left = Math.random() * 100 + 'vw'; firework.style.top = Math.random() * 100 + 'vh'; document.body.appendChild(firework); setTimeout(() => { firework.remove(); }, 1000); } setInterval(() => { createFirework(); }, 1000); </script> </body> </html> 这段代码是一个简单的HTML烟花效果，当页面加载时，会创建一个<div>元素代表烟花，样式为黄色，并且设置了动画效果，使其放大并逐渐消失。JavaScript部分定义了一个创建烟花的函数，并且每隔1秒调用一次这个函数，从而形成多个烟花的效果。这段代码可以通过复制粘贴到HTML文件中，然后在浏览器中打开来观看2022新年烟花效果。

阅读全文