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
属性实现动画,所以当鼠标左键释放的时候,动画属性就会还原从而执行降落的动画,所以不用编写降落的动画。
完整代码下载
完整代码下载