中秋节烟花代码html
时间: 2024-09-18 08:00:18 浏览: 38
中秋节烟花效果通常通过HTML、CSS和JavaScript结合创建动态视觉体验,这里提供一个简单的HTML和JavaScript代码示例来展示基本的烟花动画:
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>中秋烟花</title>
<style>
#fireworks {
position: relative;
width: 400px;
height: 400px;
border-radius: 50%;
background-color: black;
overflow: hidden;
}
.particle {
position: absolute;
top: 0;
left: 0;
opacity: 0;
animation: fireworks-burst 5s linear infinite;
}
</style>
</head>
<body>
<div id="fireworks"></div>
<script>
function addParticle(num) {
for (let i = 0; i < num; i++) {
const particle = document.createElement('div');
particle.classList.add('particle');
particle.style.top = Math.random() * 400 + 'px';
particle.style.left = Math.random() * 400 + 'px';
particle.style.width = Math.random() * 10 + 'px';
particle.style.height = Math.random() * 10 + 'px';
particle.style.backgroundColor = `hsl(${Math.random() * 360}, ${Math.random() * 70}%, ${Math.random() * 90}%)`;
particle.style.opacity = 0;
fireworks.appendChild(particle);
}
}
const fireworks = document.getElementById('fireworks');
setInterval(() => {
addParticle(10); // 每隔一段时间添加新的烟花粒子
}, 1500);
// 烟花绽放动画
const fireworksBurst = keyframes('fireworks-burst') {
from {opacity: 0;}
to {opacity: 1; transform: scale(2);}
};
@keyframes fireworks-burst {
0% {opacity: 0;}
50% {transform: scale(2); opacity: 1;}
100% {opacity: 0; transform: scale(1);}
}
</script>
</body>
</html>
```
这个例子中,我们创建了一个div区域模拟烟花,并使用JavaScript定时生成随机位置、大小和颜色的粒子,它们会以“绽放”的动画效果逐渐显示出来。注意这只是一个基础版本,实际应用中可能需要更复杂的效果和更多的细节。
阅读全文