css制作飞机

2026-02-13 04:30:16CSS

使用CSS绘制飞机

通过CSS的clip-path属性和基本形状组合，可以创建简单的飞机图形。以下是一个实现示例：

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

.airplane {
  width: 150px;
  height: 50px;
  position: relative;
  background: #3498db;
  clip-path: polygon(
    0% 50%, 
    30% 50%, 
    40% 30%, 
    70% 50%, 
    40% 70%, 
    30% 50%
  );
}

添加动画效果

让飞机具有飞行动画效果：

.airplane {
  animation: fly 3s linear infinite;
}

@keyframes fly {
  0% { transform: translateX(0) rotate(0deg); }
  50% { transform: translateX(200px) rotate(5deg); }
  100% { transform: translateX(400px) rotate(0deg); }
}

增加细节

使用伪元素添加机翼和尾翼：

.airplane::before {
  content: '';
  position: absolute;
  width: 60px;
  height: 15px;
  background: #2980b9;
  top: 15px;
  left: 60px;
  clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
}

.airplane::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 10px;
  background: #2980b9;
  bottom: 5px;
  left: 10px;
  clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
}

响应式调整

通过媒体查询适应不同屏幕尺寸：

@media (max-width: 600px) {
  .airplane {
    width: 100px;
    height: 30px;
  }
  .airplane::before {
    width: 40px;
    height: 10px;
    left: 40px;
  }
}

这种方法利用纯CSS创建轻量级的矢量图形，无需图像文件即可实现可缩放的飞机图形，适合网页中的装饰元素或加载动画使用。

css制作飞机