css制作一个火箭飞天爆炸的效果

下面是一个简单的 CSS 火箭飞天爆炸效果的实现：

HTML 代码：

<div class="rocket-container">
  <img src="rocket.png" alt="火箭" class="rocket">
  <div class="explosion"></div>
</div>

CSS 代码：

.rocket-container {
  position: relative;
  width: 100px;
  height: 100px;
}

.rocket {
  position: absolute;
  top: 0;
  animation: fly 5s linear forwards;
}

.explosion {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(circle, #ffbe0b 0%, #fb5607 50%, #ff006e 100%);
  animation: explode 1s linear 5s forwards;
  opacity: 0;
}

@keyframes fly {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-800px);
  }
}

@keyframes explode {
  from {
    opacity: 0;
    transform: scale(1);
  }
  to {
    opacity: 1;
    transform: scale(10);
  }
}

说明：

- `.rocket-container` 用于包裹火箭和爆炸效果，设置为相对定位，方便内部元素的绝对定位。
- `.rocket` 是火箭的图片，设置为绝对定位，并使用 `fly` 动画让它向上飞行。
- `.explosion` 是爆炸效果的 div，设置为绝对定位，和火箭图片重合。使用 `explode` 动画让它在 5 秒后爆炸。
- `fly` 动画使用 `translateY` 属性实现火箭向上飞行的效果。
- `explode` 动画使用 `opacity` 和 `transform: scale` 属性实现爆炸的效果。

注意：以上代码中的图片和颜色可以根据自己的需求进行更改。