步骤2：添加CSS样式 接下来，我们需要添加CSS样式来定义爆炸粒子的外观和动画效果。可以使用以下代码作为示例：

#explosion {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: black;
  overflow: hidden;
}

.particle {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: red;
  border-radius: 50%;
  animation: explode 1s infinite;
}

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

在上面的代码中，我们首先定义了容器元素#explosion的样式。我们将其设置为相对定位，并指定了宽度、高度、背景颜色和溢出属性。

然后，我们定义了粒子元素.particle的样式。我们将其设置为绝对定位，并指定了宽度、高度、背景颜色和边框半径。我们还使用animation属性指定了一个名为“explode”的动画，持续时间为1秒，并设置为无限循环。

最后，我们使用@keyframes规则定义了名为“explode”的动画。在动画的开始状态（0%）和结束状态（100%）中，我们分别指定了粒子的不透明度和缩放。

步骤3：使用JavaScript创建爆炸粒子 最后，我们可以使用JavaScript来动态地创建爆炸粒子。可以使用以下代码作为示例：

function createParticle() {
  const particle = document.createElement('div');
  particle.classList.add('particle');
  
  const container = document.getElementById('explosion');
  container.appendChild(particle);
  
  setTimeout(() => {
    particle.remove();
  }, 1000);
}

for (let i = 0; i < 10; i++) {
  setTimeout(() => {
    createParticle();
  }, i * 100);
}

在上面的代码中，我们定义了一个名为createParticle的函数，用于创建一个粒子元素并将其添加到容器中。我们先创建一个