跨年烟花源代码html带声音带倒计时
时间: 2025-01-09 17:22:19 浏览: 4
跨年烟花效果通常结合HTML、JavaScript和CSS以及音频来创建动态体验。下面是一个简单的示例HTML结构,它包含了倒计时和烟花动画,还有背景音乐:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>跨年烟花</title>
<style>
#fireworks {
position: relative;
width: 500px; /* 根据需要调整 */
height: 500px;
background: black;
}
.particle {
position: absolute;
width: 5px;
height: 5px;
border-radius: 50%;
animation: firework 2s linear infinite;
}
@keyframes firework {
0% {top: 0, opacity: 1;}
50% {opacity: 0.5;}
100% {top: calc(100% + 100px); opacity: 0;}
}
</style>
</head>
<body>
<div id="fireworks" onclick="playSound()">
<!-- 烟花粒子 -->
<div class="particle"></div>
<!-- ... 更多粒子 -->
</div>
<audio id="newYearSong" src="your_audiosong.mp3" loop hidden></audio>
<script>
function playSound() {
var audio = document.getElementById('newYearSong');
audio.play();
}
// 倒计时部分 (这里仅提供基础思路)
let countdown = 10;
const countdownInterval = setInterval(() => {
console.log(countdown);
if (countdown === 0) {
clearInterval(countdownInterval);
fireworksAnimation(); // 开始烟花爆炸
} else {
countdown--;
}
}, 1000);
function fireworksAnimation() {
// 模拟烟花爆炸,添加更多的粒子到页面上
// 这里可以动态生成新的烟花粒子并添加到火化区域
}
</script>
</body>
</html>
```
注意:这个例子没有实际的音效和完整的倒计时功能,你需要自定义`playSound()`函数加载音频文件,并在`fireworksAnimation()`中添加更复杂的烟花动画。此外,为了完整的效果,你可能还需要配合CSS3的`animation`属性和其他前端库来优化。
阅读全文