HTML煙花特效代碼帶聲音
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>煙花特效</title>
<style type="text/css">
.firework {
width: 4px;
height: 4px;
border-radius: 50%;
background-color: #fff;
position: absolute;
top: 50%;
left: 50%;
}
@keyframes shoot {
0% {
left: 50%;
top: 50%;
opacity: 1;
}
50% {
left: 15%;
top: 20%;
}
100% {
left: 10%;
top: 60%;
opacity: 0;
}
}
@keyframes explode {
0% {
transform: scale(0);
opacity: 1;
}
50% {
transform: scale(1);
opacity: 1;
}
100% {
opacity: 0;
}
}
</style>
</head>
<body>
<audio id="fireworkSound">
<source src="firework.mp3" type="audio/mpeg">
</audio>
<script type="text/javascript">
window.onload = function () {
generateFireworks();
};
function generateFireworks () {
setInterval(function () {
var firework = document.createElement("div");
firework.className = "firework";
firework.style.left = Math.random() * 100 + "%";
firework.style.animation = "shoot 1s ease-out forwards";
document.body.appendChild(firework);
setTimeout(explodeFirework, 1000, firework);
var fireworkSound = document.getElementById("fireworkSound");
fireworkSound.currentTime = 0;
fireworkSound.play();
}, 3000);
}
function explodeFirework (firework) {
firework.style.animation = "explode .5s ease-out forwards";
setTimeout(removeFirework, 500, firework);
}
function removeFirework (firework) {
document.body.removeChild(firework);
}
</script>
</body>
</html>該代碼使用了CSS的動(dòng)畫實(shí)現(xiàn)了煙花的飛行和爆炸效果，并且加上了聲音以增加特效的逼真程度。