当前位置：首页 > CSS

css制作鞭炮

2026-02-12 19:00:45CSS

CSS 制作鞭炮效果

使用CSS可以创建动态的鞭炮效果，主要通过动画和伪元素实现。以下是实现步骤：

HTML结构

<div class="firecracker"></div>

CSS样式

.firecracker {
  position: relative;
  width: 20px;
  height: 100px;
  background: linear-gradient(to bottom, #ff0000, #ff6600);
  margin: 50px auto;
  border-radius: 5px;
}

.firecracker::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 15px;
  height: 15px;
  background: #ffff00;
  border-radius: 50%;
}

.firecracker::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 10px;
  background: #333;
  border-radius: 0 0 5px 5px;
}

爆炸动画效果

@keyframes explode {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(5);
    opacity: 0;
  }
}

.firecracker:hover::before {
  animation: explode 0.5s ease-out forwards;
}

.spark {
  position: absolute;
  width: 3px;
  height: 3px;
  background: #ffcc00;
  border-radius: 50%;
  animation: sparkle 1s ease-out forwards;
}

@keyframes sparkle {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }
  100% {
    transform: translate(
      calc(var(--x) * 20px), 
      calc(var(--y) * 20px)
    );
    opacity: 0;
  }
}

JavaScript添加火花

document.querySelector('.firecracker').addEventListener('mouseover', function() {
  for(let i=0; i<20; i++) {
    const spark = document.createElement('div');
    spark.classList.add('spark');
    spark.style.setProperty('--x', Math.random() * 2 - 1);
    spark.style.setProperty('--y', Math.random() * -3);
    spark.style.left = '50%';
    spark.style.top = '-10px';
    this.appendChild(spark);

    setTimeout(() => {
      spark.remove();
    }, 1000);
  }
});

增强视觉效果

添加爆炸音效

<audio id="explosion" src="explosion.mp3" preload="auto"></audio>

document.querySelector('.firecracker').addEventListener('mouseover', function() {
  document.getElementById('explosion').play();
  // 火花生成代码...
});

多鞭炮排列

.firecracker-container {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  width: 80%;
  margin: 0 auto;
}

.firecracker {
  margin: 20px;
}

响应式调整

移动端适配

@media (max-width: 600px) {
  .firecracker {
    width: 15px;
    height: 70px;
  }

  .firecracker::before {
    width: 12px;
    height: 12px;
  }
}

通过以上CSS和少量JavaScript，可以创建出具有悬停爆炸效果的鞭炮动画。可根据需要调整颜色、尺寸和动画参数以获得不同视觉效果。

css制作鞭炮