css制作鞭炮

使用CSS制作鞭炮效果

通过CSS动画和伪元素可以模拟鞭炮的视觉效果，以下是实现步骤：

HTML结构

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

CSS样式

.firecracker {
  position: relative;
  width: 20px;
  height: 80px;
  background: linear-gradient(to bottom, #c00 10%, #900 90%);
  border-radius: 5px;
  margin: 100px auto;
}

.firecracker::before {
  content: "";
  position: absolute;
  top: -15px;
  left: 5px;
  width: 10px;
  height: 20px;
  background: #ff0;
  border-radius: 5px;
}

.firecracker::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 20px;
  height: 5px;
  background: #333;
}

/* 爆炸效果 */
@keyframes explode {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(10); opacity: 0; }
}

.explosion {
  position: absolute;
  width: 10px;
  height: 10px;
  background: radial-gradient(circle, #ff0 30%, #f80 70%);
  border-radius: 50%;
  animation: explode 0.5s forwards;
}

添加交互效果

通过JavaScript实现点击爆炸效果：

document.querySelector('.firecracker').addEventListener('click', function(e) {
  const explosion = document.createElement('div');
  explosion.className = 'explosion';
  explosion.style.left = e.clientX + 'px';
  explosion.style.top = e.clientY + 'px';
  document.body.appendChild(explosion);

  setTimeout(() => {
    explosion.remove();
  }, 500);
});

多鞭炮排列效果

创建鞭炮串效果：

.firecracker-string {
  display: flex;
  gap: 10px;
  padding: 20px;
  background: #333;
  border-radius: 5px;
  width: fit-content;
}

.firecracker-string .firecracker {
  margin: 0;
}

进阶动画效果

添加引线燃烧动画：

@keyframes burn {
  0% { background: #ff0; }
  50% { background: #f80; }
  100% { background: #c00; }
}

.firecracker::before {
  animation: burn 2s linear infinite;
}

这些代码组合可以创建出从简单到复杂的鞭炮视觉效果，通过调整颜色、尺寸和动画参数可获得不同风格的鞭炮效果。