跳至主要內容
纯 CSS 飞行直升机动画制作指南

纯 CSS 飞行直升机动画制作指南

今天，我们来学习如何仅用 HTML 和 CSS 来构建一个漂亮的动画项目。这里假设大家都是中级 CSS 开发人员。

在这个项目中将用到的以下 CSS3 动画属性：

  • CSS 转换
  • 3D 变换
  • CSS 过渡效果
  • 动画
  • 自定义动画帧

兴奋吗？让我们开始吧！

使用 HTML 定义直升机结构

首先让我们在main元素中定义一个容器，命名为helicopter，接着在这个容器中按顺序写入 4 个div元素，每个div元素的class属性值如下：

XXXWeii...大约 3 分钟CSSCSS
纯 CSS3 卡通小火车行驶动画

效果预览

代码实现

HTML 代码

<div class="center">
  <div class="mountains"></div>
  <div class="train">
    <div class="engine-front">
      <div class="chimney">
        <div class="smoke"></div>
        <div class="smoke smoke-2"></div>
        <div class="smoke smoke-3"></div>
        <div class="smoke smoke-4"></div>
      </div>
    </div>

    <div class="engine-body"></div>

    <div class="compartment">
      <div class="compartment-window"></div>
    </div>

    <div class="compartment compartment-two">
      <div class="compartment-window"></div>
    </div>

    <div class="compartment compartment-three">
      <div class="compartment-window"></div>
    </div>

    <div class="wheel-holder">
      <div class="wheel"></div>
      <div class="wheel wheel-2">
        <div class="wheel-joint"></div>
        <div class="wheel-joint wheel-joint-2"></div>
      </div>
      <div class="wheel wheel-3"></div>
      <div class="wheel wheel-4"></div>
      <div class="wheel wheel-5"></div>
      <div class="wheel wheel-6"></div>
      <div class="wheel wheel-7"></div>
      <div class="wheel wheel-8"></div>
      <div class="wheel wheel-9"></div>
    </div>
  </div>
  <div class="bridge"></div>
</div>
XXXWeii...大约 6 分钟CSSCSS
CSS实现一个让面试官眼前一亮的故障风格文字动画

成品效果

今天分享一个用 css3 来实现一个最近特别流行的故障风格的文字展示动画，我敢说，只要你在你的项目中用到这个动画，面试官看到了一定会眼前一亮。下面先来看一下成品图：

该动画效果就比较复杂了，用到的知识比较多，例如 「css 伪元素 、元素自定义属性 、蒙版属性 、animation 动画等等」

标签元素部分

<body>
  <div class="txt" data-text="我是故障风格的文字">我是故障风格的文字</div>
</body>
XXXWeii...大约 5 分钟CSSCSS