CSS 实现航班起飞、飞行和降落动画

news2024/11/20 4:30:59

CSS 实现航班起飞、飞行和降落动画

效果展示

航班起飞阶段
航班飞行阶段
航班降落

CSS 知识点

animation 属性的综合运用
:active 属性的运营

动画分解

航班滑行阶段动画

实现航班的滑行阶段动画，需要使用两个核心物件，一个是跑动动画，另外一个是固定在跑道上的航班。实现跑道可以使用background属性的repeating-linear-gradient来实现，然后结合使用animation属性实现跑道动画，这样就可以实现航班滑行阶段的动画。

航班起飞阶段动画

起飞阶段主要使用:active实现鼠标按下激活航班放大和跑道消失和变小的动画。

航班飞行阶段动画

航班飞行动画核心就是云层的动画。

航班降落阶段动画

航班降落阶段的动画其实就是鼠标放开后，云层消失、航班变小和跑道还原的动画过程。

整体页面布局

<section>
  <!-- 左侧云层 -->
  <div class="clounds">
    <img src="cloud1.png" style="--i:1" />
    <img src="cloud2.png" style="--i:2" />
    <img src="cloud3.png" style="--i:3" />
  </div>
  <!-- 右侧云层 -->
  <div class="clounds clounds2">
    <img src="cloud1.png" style="--i:1" />
    <img src="cloud2.png" style="--i:2" />
    <img src="cloud3.png" style="--i:3" />
  </div>
  <!-- 滑行跑道 -->
  <div class="runway"></div>
  <!-- 飞机 -->
  <img src="plane.png" class="plane" />
</section>

实现跑道和飞机样式

section {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #034071;
}

section .runway {
  position: relative;
  width: 400px;
  height: 100vh;
  background: #1379bc;
  border-left: 20px solid rgba(0, 0, 0, 0.25);
  border-right: 20px solid rgba(0, 0, 0, 0.25);
  transition: transform 1s;
  /* 延迟动画，主要是用于降落使用 */
  transition-delay: 1s;
  transform-origin: top;
}

section .runway::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 15px;
  height: 100%;
  background: repeating-linear-gradient(
    transparent 0%,
    transparent 50%,
    #fff 50%,
    #fff 100%
  );
  background-size: 20px 320px;
}

.plane {
  position: absolute;
  bottom: 100px;
  max-width: 250px;
  pointer-events: none;
  /* 航班影子 */
  filter: drop-shadow(10px 10px 0 rgba(0, 0, 0, 0.5));
  /* 控制5庙后 :active 属性激活后触发对应的样式 */
  transition: 5s;
}

实现上述代码后效果如下：

在这里插入图片描述

实现航班滑行动画

航班的滑行的动画可以使用:active和动画结合实现。具体代码如下：

section:active .runway {
  transform: scaleX(0.7) scaleY(0);
  transition-delay: 0s;
  transform-origin: bottom;
}

@keyframes anumateRunWay {
  0% {
    background-position-y: 0px;
  }
  100% {
    background-position-y: 320px;
  }
}

实现航班起飞动画

航班的起飞主要是通过鼠标点击section元素后触发，所以可以使用:active属性来实现动画。具体的代码如下：

section:active .runway {
  transform: scaleX(0.7) scaleY(0);
  transition-delay: 0s;
  transform-origin: bottom;
}

section:active .runway::before {
  animation: anumateRunWay 0.25s linear infinite;
}

section:active .plane {
  max-width: 500px;
  filter: drop-shadow(200px 200px 0 rgba(0, 0, 0, 0));
}

实现上述代码后，鼠标左键点击下去一直按住不动，就会可以看到飞起起飞的效果。

实现航班飞行动画

通过上述的代码实现，现在航班可以从滑行到起飞有了动画，现在就是实现云层的动画，从而结合飞机实现航班飞行的动画。具体代码如下：

.clounds {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  /* 控制几秒后显示云层 */
  transition: opacity 2s;
  transition-delay: 0s;
}

/* 当 :active 属性激活后显示云层 */
section:active .clounds {
  opacity: 1;
  transition-delay: 1s;
}

.clounds img {
  position: absolute;
  left: 0;
  width: 800px;
  animation: animateClouds 4s linear infinite;
  /* 控制多个云层做延迟动画，形成动画运动差 */
  animation-delay: calc(-1.5s * var(--i));
}

.clounds2 {
  right: 0;
  transform: rotate(180deg);
}

.clounds2 img {
  animation: animateClouds2 4s linear infinite;
  /* 控制多个云层做延迟动画，形成动画运动差 */
  animation-delay: calc(-1.5s * var(--i));
}

@keyframes animateClouds {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(100%);
  }
}

@keyframes animateClouds2 {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(-100%);
  }
}