css飞机制作视频

2026-01-08 19:42:05CSS

使用CSS制作飞机动画

通过CSS的动画和变形属性，可以创建一个简单的飞机动画效果。以下是实现步骤：

HTML结构

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

CSS样式

.airplane {
  width: 100px;
  height: 30px;
  background-color: #3498db;
  position: relative;
  border-radius: 10px;
  animation: fly 5s infinite linear;
}

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

.airplane::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 5px;
  background-color: #e74c3c;
  top: 10px;
  right: -20px;
}

@keyframes fly {
  0% {
    transform: translateX(-100px) rotate(0deg);
  }
  100% {
    transform: translateX(calc(100vw + 100px)) rotate(360deg);
  }
}

增强飞机动画效果

要创建更逼真的飞机效果，可以添加机翼和尾翼：

.airplane {
  /* 基础样式同上 */
}

.airplane::before {
  /* 机头三角形 */
}

.airplane::after {
  /* 尾翼 */
}

.wing {
  position: absolute;
  width: 70px;
  height: 10px;
  background-color: #2980b9;
  top: 15px;
  left: 15px;
  transform: rotate(-10deg);
}

.tail-wing {
  position: absolute;
  width: 30px;
  height: 8px;
  background-color: #2980b9;
  top: 5px;
  right: 10px;
  transform: rotate(10deg);
}

添加云朵背景

让飞机在云朵间穿行：

body {
  background-color: #87CEEB;
  overflow: hidden;
}

.cloud {
  position: absolute;
  background: white;
  border-radius: 50%;
  animation: moveCloud 20s linear infinite;
}

@keyframes moveCloud {
  from { transform: translateX(100vw); }
  to { transform: translateX(-100px); }
}

响应式调整

确保飞机在不同屏幕尺寸上正常显示：

css飞机制作视频

@media (max-width: 768px) {
  .airplane {
    width: 60px;
    height: 20px;
  }

  .wing {
    width: 40px;
    height: 6px;
  }

  .tail-wing {
    width: 20px;
    height: 5px;
  }
}

这些CSS代码组合起来可以创建一个在屏幕上飞行的飞机动画。通过调整关键帧动画和变换属性，可以改变飞机的飞行路径和速度。