css制作火箭

使用CSS制作火箭动画

通过CSS的动画和变形属性可以创建一个简单的火箭动画效果。以下是一个完整的实现方法：

HTML结构

<div class="rocket">
  <div class="body"></div>
  <div class="window"></div>
  <div class="fin left"></div>
  <div class="fin right"></div>
  <div class="fire"></div>
</div>

CSS样式

.rocket {
  position: relative;
  width: 100px;
  height: 200px;
  margin: 100px auto;
  animation: launch 3s infinite;
}

.body {
  width: 50px;
  height: 150px;
  background: linear-gradient(to right, #ff5e00, #ff9966);
  border-radius: 10px 10px 0 0;
  position: absolute;
  bottom: 0;
  left: 25px;
}

.window {
  width: 20px;
  height: 20px;
  background: #87CEEB;
  border-radius: 50%;
  position: absolute;
  top: 40px;
  left: 40px;
}

.fin {
  width: 0;
  height: 0;
  position: absolute;
  bottom: 20px;
}

.fin.left {
  border-left: 15px solid transparent;
  border-right: 15px solid #ff5e00;
  border-bottom: 30px solid #ff5e00;
  left: 10px;
}

.fin.right {
  border-left: 15px solid #ff5e00;
  border-right: 15px solid transparent;
  border-bottom: 30px solid #ff5e00;
  right: 10px;
}

.fire {
  width: 30px;
  height: 60px;
  background: linear-gradient(to top, #ff0000, #ff9900);
  border-radius: 0 0 15px 15px;
  position: absolute;
  bottom: -60px;
  left: 35px;
  animation: flicker 0.5s infinite alternate;
}

@keyframes launch {
  0% { transform: translateY(0); }
  50% { transform: translateY(-100px); }
  100% { transform: translateY(0); }
}

@keyframes flicker {
  0% { opacity: 0.8; height: 60px; }
  100% { opacity: 1; height: 70px; }
}

添加3D效果

要使火箭看起来更立体，可以添加CSS 3D变换：

.rocket {
  transform-style: preserve-3d;
  perspective: 1000px;
}

.body {
  transform: rotateY(15deg);
  box-shadow: 5px 5px 15px rgba(0,0,0,0.3);
}

响应式调整

为了让火箭在不同屏幕尺寸下都能正常显示：

@media (max-width: 600px) {
  .rocket {
    transform: scale(0.7);
  }
}

这个实现包含了火箭的基本形状、火焰动画和起飞动画效果。通过调整CSS属性可以改变火箭的颜色、大小和动画速度。火焰使用渐变色和闪烁动画增强真实感，而火箭主体则通过简单的上下移动模拟发射效果。