css制作火箭

CSS 火箭制作方法

使用纯CSS可以创建一个简单的火箭动画效果，以下是实现步骤：

HTML结构

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

CSS样式

.rocket {
  position: relative;
  width: 80px;
  height: 200px;
  margin: 100px auto;
}

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

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

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

.fin.left {
  border-left: 20px solid transparent;
  border-right: 20px solid #ff6600;
  border-bottom: 40px solid transparent;
  left: -5px;
}

.fin.right {
  border-left: 20px solid #ff6600;
  border-right: 20px solid transparent;
  border-bottom: 40px solid transparent;
  right: -5px;
}

.flame {
  width: 10px;
  height: 60px;
  background: linear-gradient(to top, #ffcc00, #ff6600);
  position: absolute;
  left: 30px;
  bottom: -60px;
  border-radius: 0 0 5px 5px;
  animation: flame 0.3s infinite alternate;
}

@keyframes flame {
  from {
    height: 60px;
  }
  to {
    height: 80px;
  }
}

添加起飞动画

要让火箭起飞，可以添加以下动画效果：

.rocket {
  animation: launch 5s ease-in forwards;
}

@keyframes launch {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-200px) rotate(0deg);
  }
  100% {
    transform: translateY(-500px) rotate(10deg);
  }
}

响应式调整

可以根据需要调整火箭大小和位置：

@media (max-width: 600px) {
  .rocket {
    width: 60px;
    height: 150px;
  }
  .body {
    width: 40px;
    height: 120px;
  }
}

这个CSS火箭包含主体、窗口、尾翼和火焰动画效果，通过关键帧动画可以实现起飞效果。可以根据需要修改颜色、尺寸和动画参数来创建不同风格的火箭。