css制作鞭炮
使用CSS制作鞭炮效果
通过CSS的动画和伪元素可以模拟鞭炮的爆炸效果。以下是实现方法：
鞭炮主体
.firecracker {
position: relative;
width: 20px;
height: 80px;
background: linear-gradient(to bottom, #c00, #900);
margin: 50px auto;
border-radius: 5px;
}引线部分
.firecracker::before {
content: '';
position: absolute;
top: -10px;
left: 50%;
width: 4px;
height: 15px;
background: #333;
transform: translateX(-50%);
}爆炸效果
.explosion {
position: absolute;
width: 5px;
height: 5px;
background: #ff0;
border-radius: 50%;
animation: explode 0.5s ease-out forwards;
}
@keyframes explode {
0% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(20);
opacity: 0;
}
}火花粒子
.spark {
position: absolute;
width: 2px;
height: 2px;
background: #f90;
border-radius: 50%;
animation:
sparkMove 1s linear forwards,
sparkFade 1s linear forwards;
}
@keyframes sparkMove {
100% {
transform: translate(var(--tx), var(--ty));
}
}
@keyframes sparkFade {
100% {
opacity: 0;
}
}JavaScript触发动画
document.querySelector('.firecracker').addEventListener('click', function() {
// 创建爆炸中心
const explosion = document.createElement('div');
explosion.className = 'explosion';
this.appendChild(explosion);
// 创建火花粒子
for(let i=0; i<20; i++) {
const spark = document.createElement('div');
spark.className = 'spark';
spark.style.setProperty('--tx', `${Math.random()*100-50}px`);
spark.style.setProperty('--ty', `${Math.random()*100-50}px`);
this.appendChild(spark);
}
setTimeout(() => {
explosion.remove();
document.querySelectorAll('.spark').forEach(s => s.remove());
}, 1000);
});完整HTML结构
<div class="firecracker"></div>这个实现包含了一个垂直的鞭炮主体、顶部的引线，点击后会触发爆炸动画，产生中心爆炸效果和随机方向的火花粒子。动画结束后所有效果元素会自动移除，可以重复触发。
