html代码烟花特效
body {
background-color: black;
}
h1 {
font-family: Arial
sans-serif;
color: white;
text-align: center;
margin-top: 150px;
}
.firework {
width: 6px;
height: 120px;
background-color: white;
position: absolute;
}
@keyframes explode {
0% { transform: scale(1); opacity: 1; }
* { transform: scale(5); opacity: 0; }
}
Firework Effect
function createFirework() {
const firework = document.createElement("div");
firework.classList.add("firework");
const startX = Math.floor(Math.random() * window.innerWidth);
const startY = window.innerHeight;
const endX = Math.floor(Math.random() * window.innerWidth);
const endY = Math.floor(Math.random() * (window.innerHeight / 2));
const dx = endX - startX;
const dy = endY - startY;
const distance = Math.sqrt(dx * dx + dy * dy);
const duration = distance / 1000;
firework.style.left = startX + "px";
firework.style.bottom = startY + "px";
document.body.appendChild(firework);
setTimeout(function() {
firework.style.transform = "scale(1)";
});
setTimeout(function() {
firework.style.transition = "bottom " + duration + "s ease-out
transform 0.2s";
firework.style.bottom = endY + "px";
firework.style.transform = "scale(5)";
firework.style.opacity = "0";
}
10);
setTimeout(function() {
firework.remove();
}
duration * 1000 + 200);
}
setInterval(function() {
createFirework();
}
100);