当前位置：首页 > CSS

css制作飞机

2026-01-28 10:05:46CSS

使用CSS绘制飞机的基本形状

通过CSS的border属性和transform属性可以构建飞机的基础轮廓。以下代码创建一个简单的飞机头部和机身：

css制作飞机

.airplane {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 20px solid #3498db;
  position: relative;
  transform: rotate(45deg);
}

添加飞机机翼

使用伪元素::before和::after创建左右机翼：

css制作飞机

.airplane::before {
  content: "";
  position: absolute;
  top: 5px;
  left: -30px;
  width: 60px;
  height: 8px;
  background: #2980b9;
  transform: rotate(-45deg);
}
.airplane::after {
  content: "";
  position: absolute;
  bottom: -15px;
  left: -30px;
  width: 60px;
  height: 8px;
  background: #2980b9;
  transform: rotate(45deg);
}

创建飞机尾翼

通过额外元素或伪元素实现尾翼效果：

.airplane .tail {
  position: absolute;
  right: -15px;
  top: -10px;
  width: 15px;
  height: 20px;
  background: #1f618d;
  transform: rotate(30deg);
}

添加动画效果

使用CSS动画让飞机移动：

@keyframes fly {
  0% { transform: translateX(0) rotate(45deg); }
  100% { transform: translateX(500px) rotate(45deg); }
}
.airplane {
  animation: fly 3s linear infinite;
}

完整示例代码

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

<style>
  .airplane {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 20px solid #3498db;
    position: relative;
    transform: rotate(45deg);
    animation: fly 3s linear infinite;
  }

  .airplane::before {
    content: "";
    position: absolute;
    top: 5px;
    left: -30px;
    width: 60px;
    height: 8px;
    background: #2980b9;
    transform: rotate(-45deg);
  }

  .airplane::after {
    content: "";
    position: absolute;
    bottom: -15px;
    left: -30px;
    width: 60px;
    height: 8px;
    background: #2980b9;
    transform: rotate(45deg);
  }

  .airplane .tail {
    position: absolute;
    right: -15px;
    top: -10px;
    width: 15px;
    height: 20px;
    background: #1f618d;
    transform: rotate(30deg);
  }

  @keyframes fly {
    0% { transform: translateX(0) rotate(45deg); }
    100% { transform: translateX(500px) rotate(45deg); }
  }
</style>