当前位置：首页 > CSS

css制作火箭

2026-01-28 07:12:20CSS

CSS 制作火箭

使用纯CSS可以创建简单的火箭图形，主要依赖border、transform和伪元素实现。以下是实现步骤和代码示例：

火箭主体

通过矩形和三角形组合形成火箭主体和顶部：

css制作火箭

.rocket {
  width: 80px;
  height: 180px;
  background: linear-gradient(to bottom, #ff5e00, #ff0000);
  border-radius: 10px 10px 0 0;
  position: relative;
}

火箭头部

使用::before伪元素创建锥形头部：

.rocket::before {
  content: "";
  position: absolute;
  top: -40px;
  left: 10px;
  width: 60px;
  height: 60px;
  background: #ff8c00;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

火箭尾翼

通过::after伪元素和边框技巧创建尾翼：

css制作火箭

.rocket::after {
  content: "";
  position: absolute;
  bottom: -30px;
  left: -10px;
  width: 100px;
  height: 30px;
  background: #ff4500;
  clip-path: polygon(
    20% 0%,
    80% 0%,
    100% 100%,
    0% 100%
  );
}

火焰效果

添加动画火焰增强效果：

.flame {
  position: absolute;
  bottom: -50px;
  left: 30px;
  width: 20px;
  height: 50px;
  background: #ffcc00;
  border-radius: 50% 50% 20% 20%;
  animation: flicker 0.3s infinite alternate;
}

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

完整HTML结构

<div class="rocket">
  <div class="flame"></div>
</div>

进阶效果

添加窗口：使用圆形伪元素在火箭主体上创建舷窗
发射动画：通过@keyframes实现升空动画
响应式调整：使用vw/vh单位适应不同屏幕尺寸

关键动画代码示例：

@keyframes launch {
  0% { transform: translateY(0) rotate(0deg); }
  100% { transform: translateY(-100vh) rotate(10deg); }
}
.rocket.launch {
  animation: launch 5s forwards;
}

通过组合这些CSS技巧，可以构建出具有基本形态和动态效果的火箭图形，无需任何JavaScript或图像资源。