css制作飞机

使用CSS绘制飞机

通过CSS的clip-path和transform属性可以绘制简单的飞机图形。以下是一个基础示例，利用纯CSS创建一个扁平化风格的飞机图标：

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

.airplane {
  width: 100px;
  height: 100px;
  position: relative;
}

.airplane::before {
  content: "";
  position: absolute;
  width: 60px;
  height: 20px;
  background: #3498db;
  clip-path: polygon(
    0% 50%, 
    70% 50%, 
    100% 0%, 
    70% 50%, 
    100% 100%
  );
  transform: rotate(-45deg);
  top: 40px;
  left: 20px;
}

.airplane::after {
  content: "";
  position: absolute;
  width: 30px;
  height: 10px;
  background: #2980b9;
  clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
  transform: rotate(45deg);
  top: 45px;
  left: 60px;
}

添加动画效果

通过CSS动画让飞机具有飞行效果。以下代码实现飞机从左向右滑行并轻微上下浮动的动画：

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

@keyframes fly {
  0% {
    transform: translateX(-100px) translateY(0px);
  }
  50% {
    transform: translateX(100px) translateY(-10px);
  }
  100% {
    transform: translateX(300px) translateY(0px);
  }
}

使用SVG与CSS结合

更复杂的飞机图形建议使用SVG，通过CSS控制样式和动画：

<svg class="airplane-svg" viewBox="0 0 100 100">
  <path d="M10,50 L40,30 L80,40 L60,50 L80,60 L40,70 Z" />
</svg>

.airplane-svg {
  width: 150px;
  fill: #e74c3c;
  stroke: #c0392b;
  stroke-width: 2px;
  animation: soar 3s ease-in-out infinite alternate;
}

@keyframes soar {
  to {
    transform: translateY(-20px) rotate(5deg);
  }
}

响应式调整

通过媒体查询让飞机图形适应不同屏幕尺寸：

@media (max-width: 600px) {
  .airplane {
    width: 60px;
    height: 60px;
  }
  .airplane::before {
    width: 40px;
    top: 25px;
  }
}

以上方法可根据需要调整颜色、尺寸和动画参数，实现不同风格的飞机效果。