使用 CSS 动画飞行直升机（分步指南）

2025-05-24

使用 CSS 动画飞行直升机（分步指南）

嘿👨‍💻，欢迎回来。

在本文中，我们将仅使用 HTML 和 CSS 构建一个精美的动画项目。该项目是我的“完整 CSS3 动画课程”的一部分，我假设您是中级 CSS 开发人员，可以构建此项目。⛳我在 这个项目中使用的 CSS3 动画属性：
直升机项目.gif

  • CSS 变换
  • 3D 变换
  • CSS 过渡
  • 动画片
  • 自定义计时功能（关键帧）

那么，你对构建这个项目感到兴奋吗？我也是。开始吧🏒

注：如果你想和我一起写代码，我在文章底部添加了完整的教程视频。这个直升机造型的灵感来自@frontendjoe

🏗 使用 HTML 定义直升机结构

让我们在main元素中定义一个名为“直升机”的容器，并在该容器内按顺序写入 4 个带有类的 div 元素：

  • 座舱
  • 尾巴
  • 主要的
  • 转子

在这个“rotor”类中，您必须添加一个带有“rotator”类的 div，以及这个“rotator”类中的两个空 div。

<html>
 <head>
 </head>
 <body>
  <main class="helicopter">
     <div class="cockpit"></div>
     <div class="tail"></div>
     <div class="main"></div>
     <div class="rotor">
       <div class="rotator">
         <div></div>
         <div></div>
       </div>
     </div>
     <main>
 </body>
</html>
Enter fullscreen mode Exit fullscreen mode

🚁直升机设计

在本节中，我们将设计我们的HTML结构，使其变成直升机形状。

Body

body {
  /* put elements into center */
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
Enter fullscreen mode Exit fullscreen mode

.cockpit class

.cockpit {
    position: absolute;
    overflow: hidden;
    z-index: 1;
    width: 195px;
    height: 195px;
    border-radius: 100px 40px 50px 50px;
    background-color: #44d2fd;
}
Enter fullscreen mode Exit fullscreen mode

输出：
驾驶舱级输出

然后，我们需要为这个驾驶舱类添加玻璃。因此，我们在 .cockpit 中定义玻璃形状，:before然后:after：

.cockpit::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: -10px;
    left: -25px;
    width: 170px;
    height: 170px;
    border-radius: 40px;
    background-color: #302e37;
}
.cockpit::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: -60px;
    left: -60px;
    width: 170px;
    height: 170px;
    border-radius: 40px;
    background-color: rgba(255, 255, 255, 0.05);
}
Enter fullscreen mode Exit fullscreen mode

输出：
玻璃形状的驾驶舱

.tail class

现在，我们必须将样式应用到 .tail 类：

.tail {
    position: absolute;
    top: 50px;
    left: 150px;
    transform-origin: left center;
    border-top: 10px solid transparent;
    border-bottom: 80px solid transparent;
    border-left: 350px solid #2fadd2;
    border-bottom-right-radius: 10px;
    height: 10px;
}
Enter fullscreen mode Exit fullscreen mode

输出：
尾部形状与 CSS

.main class

该类将是直升机旋翼体：

.main {
    position: absolute;
    left: 130px;
    top: -10px;
    width: 40px;
    height: 20px;
    background: #302e37;
}
Enter fullscreen mode Exit fullscreen mode

输出：
主旋翼形状

。rotor class

.rotor {
    width: 700px;
    height: 700px;
    border-radius: 350px;
    position: absolute;
    top: -360px;
    left: -200px;
    z-index: 2;
    overflow: hidden;
    background-color: #a299ab;
    opacity: 0.12;
    transform: scaleY(0.075);
}
Enter fullscreen mode Exit fullscreen mode

输出： 完成主旋翼的造型后，我们需要将旋翼内部的两个空心部分固定住，使其更逼真。下一课我们将应用旋转动画，您将看到精美的动画。
转子形状图像
div

.rotator div {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -350px;
    margin-top: -30px;
    width: 700px;
    height: 80px;
    background-color: #fff;
}

.rotator div:nth-child(1){
    transform: rotate(0deg);
}

.rotor div:nth-child(2) {
    transform: rotate(90deg);
}
Enter fullscreen mode Exit fullscreen mode

输出：
转子类与转子形状图像

🛫飞行能力

到目前为止，我们已经创建了直升机的形状和设计。但是如果没有动画和关键帧，动画就无法实现。所以，让我们使用 CSSanimation属性赋予它飞行动力。

⏱定义@Keyframes

在使用动画属性之前，我们需要创建关键帧。在本项目中，我们将创建两个 @keyframs，分别名为：

  • 弹跳
  • 旋转

bounce

@keyframes bounce {
    0%,100%{
        transform: translate(0px, -50px) rotate(-15deg);
    }
    50% {
        transform: translate(0px, 50px) rotate(-10deg);
    }
}
Enter fullscreen mode Exit fullscreen mode

rotate


@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}
Enter fullscreen mode Exit fullscreen mode

📁使用动画属性

到目前为止，我们已经@keyframes为直升机项目定义了两个。现在，将它们添加到.helicopter和.rotator类中。

.helicopter class

.helicopter {
    animation: bounce 5s infinite; /* adding bounce keyframes with duration 5s and infinite loop */
}
Enter fullscreen mode Exit fullscreen mode

.rotator class

.rotator {
    position: absolute;
    width: 700px;
    height: 700px;
    border-radius: 350px;
    animation: rotate 0.6s linear infinite; /* added rotate @keyframs */
}
Enter fullscreen mode Exit fullscreen mode

输出：
直升机项目.gif

🎬完整教程

您可以按照此视频从头开始编写代码来构建该项目。

👏结论

好了，我们学习了如何仅使用 CSS 创建复杂的形状和动画。你甚至不需要接触 JavaScript。希望你喜欢这个项目。如果你对前端开发感兴趣，可以订阅我的 YouTube 频道。

完成这个项目后，告诉我你有什么感想。欢迎在下方留言✍

☕_给我买杯咖啡：
https://www.buymeacoffee.com/codewithshahan

🎿您可以通过以下方式联系我：
Twitter
Linkedin
Github

祝您编码愉快！

文章来源：https://dev.to/codewithshahan/flying-helicopter-with-css-animation-2no9
Devto 翻译
PREV
Sass 速成课程 🎥Sass 速成课程 [完整教程] 👏 结论
NEXT
6 个月内成为前端开发人员的 4 项技能（路线图）