css制作一个火箭飞天爆炸的效果
时间: 2023-08-19 18:08:41 浏览: 184
下面是一个简单的 CSS 火箭飞天爆炸效果的实现:
HTML 代码:
```html
<div class="rocket-container">
<img src="rocket.png" alt="火箭" class="rocket">
<div class="explosion"></div>
</div>
```
CSS 代码:
```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` 属性实现爆炸的效果。
注意:以上代码中的图片和颜色可以根据自己的需求进行更改。
阅读全文
相关推荐

















