当前位置：首页 > CSS

css制作飞机

2026-04-01 13:06:14CSS

CSS 制作飞机的方法

使用纯CSS可以创建简单的飞机图形，主要通过::before和::after伪元素结合border属性实现。以下是两种常见方法：

方法一：基础飞机形状

通过一个主元素和伪元素构建飞机的基本轮廓：

<div class="airplane"></div>

.airplane {
  position: relative;
  width: 100px;
  height: 20px;
  background: #3498db;
  border-radius: 10px;
}

.airplane::before {
  content: "";
  position: absolute;
  top: -15px;
  left: 20px;
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 20px solid #e74c3c;
}

.airplane::after {
  content: "";
  position: absolute;
  top: 0;
  right: -10px;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 20px solid #2ecc71;
}

方法二：3D风格飞机

利用CSS变换和阴影增强立体感：

<div class="airplane-3d"></div>

.airplane-3d {
  position: relative;
  width: 120px;
  height: 30px;
  background: linear-gradient(90deg, #2980b9, #3498db);
  border-radius: 15px;
  transform: rotate(-5deg);
  box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}

.airplane-3d::before {
  content: "";
  position: absolute;
  top: -25px;
  left: 30px;
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 30px solid #e74c3c;
  transform: skewX(-10deg);
}

.airplane-3d::after {
  content: "";
  position: absolute;
  top: 5px;
  right: -15px;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 25px solid #27ae60;
  filter: drop-shadow(2px 2px 1px rgba(0,0,0,0.2));
}

动画效果

添加CSS动画让飞机飞行：

css制作飞机

@keyframes fly {
  0% { transform: translateX(0) rotate(-5deg); }
  100% { transform: translateX(300px) rotate(5deg); }
}

.animated-plane {
  animation: fly 3s ease-in-out infinite alternate;
}

将animated-plane类添加到飞机元素即可实现左右移动的动画效果。