CSS写一个网页烟花特效

这里是一个使用 CSS 实现烟花特效的例子：

@keyframes fireworks {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateY(-1000px) scale(0);
    opacity: 0;
  }
}

.firework {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: red;
}

.firework.blue {
  background-color: blue;
}

.firework.yellow {
  background-color: yellow;
}

.firework.green {
  background-color: green;
}

.firework.white {
  background-color: white;
}

.firework {
  animation: fireworks 2s ease-in-out;
}

.firework.delayed {
  animation-delay: 0.5s;
}

.firework.longer {
  animation-duration: 3s;
}

您可以通过更改背景颜色、动画持续时间、动画延迟时间等属性来调整烟花的外观。你还可以使用 JavaScript 来控制烟花的发射。