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%);
}
}
实现航班降落动画
因为使用:active属性实现动画，所以当鼠标左键释放的时候，动画属性就会还原从而执行降落的动画，所以不用编写降落的动画。