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

2024-04-05 23:04

本文主要是介绍CSS 实现航班起飞、飞行和降落动画,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

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

完整代码下载

完整代码下载

这篇关于CSS 实现航班起飞、飞行和降落动画的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/878390

相关文章

python实现svg图片转换为png和gif

《python实现svg图片转换为png和gif》这篇文章主要为大家详细介绍了python如何实现将svg图片格式转换为png和gif,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录python实现svg图片转换为png和gifpython实现图片格式之间的相互转换延展:基于Py

Python利用ElementTree实现快速解析XML文件

《Python利用ElementTree实现快速解析XML文件》ElementTree是Python标准库的一部分,而且是Python标准库中用于解析和操作XML数据的模块,下面小编就来和大家详细讲讲... 目录一、XML文件解析到底有多重要二、ElementTree快速入门1. 加载XML的两种方式2.

Java的栈与队列实现代码解析

《Java的栈与队列实现代码解析》栈是常见的线性数据结构,栈的特点是以先进后出的形式,后进先出,先进后出,分为栈底和栈顶,栈应用于内存的分配,表达式求值,存储临时的数据和方法的调用等,本文给大家介绍J... 目录栈的概念(Stack)栈的实现代码队列(Queue)模拟实现队列(双链表实现)循环队列(循环数组

C++如何通过Qt反射机制实现数据类序列化

《C++如何通过Qt反射机制实现数据类序列化》在C++工程中经常需要使用数据类,并对数据类进行存储、打印、调试等操作,所以本文就来聊聊C++如何通过Qt反射机制实现数据类序列化吧... 目录设计预期设计思路代码实现使用方法在 C++ 工程中经常需要使用数据类,并对数据类进行存储、打印、调试等操作。由于数据类

Python实现图片分割的多种方法总结

《Python实现图片分割的多种方法总结》图片分割是图像处理中的一个重要任务,它的目标是将图像划分为多个区域或者对象,本文为大家整理了一些常用的分割方法,大家可以根据需求自行选择... 目录1. 基于传统图像处理的分割方法(1) 使用固定阈值分割图片(2) 自适应阈值分割(3) 使用图像边缘检测分割(4)

Android实现在线预览office文档的示例详解

《Android实现在线预览office文档的示例详解》在移动端展示在线Office文档(如Word、Excel、PPT)是一项常见需求,这篇文章为大家重点介绍了两种方案的实现方法,希望对大家有一定的... 目录一、项目概述二、相关技术知识三、实现思路3.1 方案一:WebView + Office Onl

C# foreach 循环中获取索引的实现方式

《C#foreach循环中获取索引的实现方式》:本文主要介绍C#foreach循环中获取索引的实现方式,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录一、手动维护索引变量二、LINQ Select + 元组解构三、扩展方法封装索引四、使用 for 循环替代

Spring Security+JWT如何实现前后端分离权限控制

《SpringSecurity+JWT如何实现前后端分离权限控制》本篇将手把手教你用SpringSecurity+JWT搭建一套完整的登录认证与权限控制体系,具有很好的参考价值,希望对大家... 目录Spring Security+JWT实现前后端分离权限控制实战一、为什么要用 JWT?二、JWT 基本结构

Java实现优雅日期处理的方案详解

《Java实现优雅日期处理的方案详解》在我们的日常工作中,需要经常处理各种格式,各种类似的的日期或者时间,下面我们就来看看如何使用java处理这样的日期问题吧,感兴趣的小伙伴可以跟随小编一起学习一下... 目录前言一、日期的坑1.1 日期格式化陷阱1.2 时区转换二、优雅方案的进阶之路2.1 线程安全重构2

Android实现两台手机屏幕共享和远程控制功能

《Android实现两台手机屏幕共享和远程控制功能》在远程协助、在线教学、技术支持等多种场景下,实时获得另一部移动设备的屏幕画面,并对其进行操作,具有极高的应用价值,本项目旨在实现两台Android手... 目录一、项目概述二、相关知识2.1 MediaProjection API2.2 Socket 网络