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 实现航班起飞、飞行和降落动画
CSS 实现航班起飞、飞行和降落动画 效果展示 航班起飞阶段 航班飞行阶段 航班降落 CSS 知识点 animation 属性的综合运用:active 属性的运营 动画分解 航班滑行阶段动画 实现航班的滑行阶段动画,需要使用两个核心物件,一个是跑动动画&#x…...
设计模式——建造者模式03
工厂模式注重直接生产一个对象,而建造者模式 注重一个复杂对象是如何组成的(过程),在生产每个组件时,满足单一原则,实现了业务拆分。 设计模式,一定要敲代码理解 组件抽象 public interface …...
【机器学习】《机器学习算法竞赛实战》思考练习(更新中……)
文章目录 第2章 问题建模(一)对于多分类问题,可否将其看作回归问题进行处理,对类别标签又有什么要求?(二)目前给出的都是已有的评价指标,那么这些评价指标(分类指标和回归…...
机场数据治理系列介绍(5)民用机场智慧能源系统评价体系设计
目录 一、背景 二、体系设计 1、评价体系设计维度 2、评价体系相关约定 3、评价指标体系框架设计 4、能源利用评价指标 5、环境友好评价指标 6、智慧管控评价指标 7、安全保障评价指标 三、具体落地措施 一、背景 在“双碳”国策之下,各类机场将能源系统建…...
[LeetCode][LCR190]加密运算——全加器的实现
题目 LCR 190. 加密运算 计算机安全专家正在开发一款高度安全的加密通信软件,需要在进行数据传输时对数据进行加密和解密操作。假定 dataA 和 dataB 分别为随机抽样的两次通信的数据量: 正数为发送量负数为接受量0 为数据遗失 请不使用四则运算符的情况…...
Linux: linux常见操作指令
目录 01.ls 指令 02. pwd命令 03. cd 指令 04. touch指令 05.mkdir指令(重要) 06.rmdir指令 && rm 指令(重要) 07.man指令(重要) 07.cp指令(重要) 08.mv指令&#…...
【BPNN】BP神经网络代码
主代码 %function main() clc clear close all %% 1.原始数据 %输入 SR1[20.55 22.44 25.37 27.13 29.45 30.10 30.96 34.06 36.42 38.09 39.13 39.99 ...41.93 44.59 47.30 52.89 55.73 56.76 59.17 60.63]; SR2[0.6 0.75 0.85 0.9 1.05 1.35 1.45 1.6 1.7 1.85 2.15 2.2 2.2…...
基于mqtt的物联网控制移动应用程序开发
具体实现问题 MQTT模型、特点、服务质量、报文、消息类型表 java实现mqtt两种方式:Paho Java原生库、spring boot MQTT与HTTP:哪一个最适合物联网? mqtt协议和http协议区别 应用是如何实现mqtt协议 通过调用安卓的MQTT库来实现MQTT协议&…...
MPLS-基础、LSR、LSP、标签、体系结构
MPLS技术 MPLS基础 MPLS:转发数据时,只在网络边缘分析IP报文头,不在每一跳都分析,节约了转发时间。 MPLS:Multiprotocol Label Switching,多协议标签交换骨干网技术。主要应用:VPN、流量工程…...
【RV1126】Ubuntu22.04下sdk编译问题汇集
对于新版本Ubuntu系统来编译SDK,尤其是buildroot ,是一个巨大考验,发现问题如下: 1. c-stack.c的SIGSTKSZ错误 buildroot 报错:c-stack.c:55:26:error:missing binary operator before token “(“55 在buildroot目录中找到c-s…...
51单片机使用uart串口和助手简单调试
基础知识 参考 特殊功能寄存器PCON(控制波特率是否加倍SMOD)、TMOD(T0,T1计时器的功能方式)、TCON(T0,T1计时器的控制)、串口中断、SCON(串口数据控制寄存器) 关闭定时器1中断&…...
Python网络爬虫(五):b站弹幕
上一篇对b站的视频评论爬取进行了探讨,这一篇是弹幕。直接上代码: import csv import json import re import chardet import requestsheaders = {user-agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.131 Saf…...
Docker环境安装Postgresql数据库Posrgresql 15.6
宿主机是ubuntu 22.04版本 ubuntu宿主机上安装docker,参见官方文档https://docs.docker.com/engine/install/ubuntu/, docker-ce是社区版 docker-ee是企业版 1、检查Docker是否安装 rootODS1SPGOFSDEV:~# docker Command docker not found, but can be installed …...
当代软件专业大学生与青年在新质生产力背景下的发展探究
在新质生产力的浪潮中,信息技术以前所未有的速度革新,为软件专业的大学生和青年带来了丰富的机遇,同时也伴随着一系列的挑战。他们如何把握时代的脉搏,实现个人的发展,成为了值得深入探讨的话题。 一、新质生产力背景下的机遇 随着新质生产力的不断发展,信息技术在各个领…...
MATLAB——知识点备忘
最近在攻略ADC建模相关方面,由好多零碎的知识点,这里写个备忘录。 Matlab 判断一个数是否为整数 1. isinteger 函数 MATLAB中,可以使用 isinteger 函数来判断一个数是否为整数,例如:要判断x是否为整数可以采用以下代…...
C++入门(以c为基础)——学习笔记2
1.引用 引用不是新定义一个变量,而是给已存在变量取了一个别名,编译器不会为引用变量开辟内存空 间。在语法层面,我们认为它和它引用的变量共用同一块内存空间。 可以取多个别名,也可以给别名取别名。 b/c/d本质都是别名&#…...
设计模式-单例模式(懒汉式)
1. 概念 保证一个类只有一个实例并为该实例提供一个全局唯一的访问节点 2. 懒汉式-方式一 2.1 代码示例(方式一) 示例 public class Singleton03 {/*** 构造器私有化*/private Singleton03() {}/*** 成员变量*/private static Singleton03 INSTANCE;…...
算法| ss 回溯
39.组合总数46.全排列—478.子集79.单词搜索—1连续差相同的数字—1 39.组合总数 /*** param {number[]} candidates* param {number} target* return {number[][]}*/ // 思路 // dfs传参,传idx, 剩余target // dfs返回: 0 收集,…...
基于R语言绘制-散点小提琴图
原文链接:R语言绘图 | 散点小提琴图 本期教程 写在前面 本期的图形来自发表在Nature期刊中的文章,这样的基础图形在日常分析中使用频率较高。 获得本期教程数据及代码,后台回复关键词:20240405 绘图 设置路径 setwd("You…...
Arduino开发 esp32cam+opencv人脸识别距离+语音提醒
效果图 低于20厘米语音提醒字体变红 Arduino代码 可直接复制使用(修改自己的WIFI) #include <esp32cam.h> #include <WebServer.h> #include <WiFi.h> // 设置要连接的WiFi名称和密码 const char* WIFI_SSID "gumou"; const char* …...
conda相比python好处
Conda 作为 Python 的环境和包管理工具,相比原生 Python 生态(如 pip 虚拟环境)有许多独特优势,尤其在多项目管理、依赖处理和跨平台兼容性等方面表现更优。以下是 Conda 的核心好处: 一、一站式环境管理:…...
springboot 百货中心供应链管理系统小程序
一、前言 随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,百货中心供应链管理系统被用户普遍使用,为方…...
如何在最短时间内提升打ctf(web)的水平?
刚刚刷完2遍 bugku 的 web 题,前来答题。 每个人对刷题理解是不同,有的人是看了writeup就等于刷了,有的人是收藏了writeup就等于刷了,有的人是跟着writeup做了一遍就等于刷了,还有的人是独立思考做了一遍就等于刷了。…...
Pinocchio 库详解及其在足式机器人上的应用
Pinocchio 库详解及其在足式机器人上的应用 Pinocchio (Pinocchio is not only a nose) 是一个开源的 C 库,专门用于快速计算机器人模型的正向运动学、逆向运动学、雅可比矩阵、动力学和动力学导数。它主要关注效率和准确性,并提供了一个通用的框架&…...
AI病理诊断七剑下天山,医疗未来触手可及
一、病理诊断困局:刀尖上的医学艺术 1.1 金标准背后的隐痛 病理诊断被誉为"诊断的诊断",医生需通过显微镜观察组织切片,在细胞迷宫中捕捉癌变信号。某省病理质控报告显示,基层医院误诊率达12%-15%,专家会诊…...
解析奥地利 XARION激光超声检测系统:无膜光学麦克风 + 无耦合剂的技术协同优势及多元应用
在工业制造领域,无损检测(NDT)的精度与效率直接影响产品质量与生产安全。奥地利 XARION开发的激光超声精密检测系统,以非接触式光学麦克风技术为核心,打破传统检测瓶颈,为半导体、航空航天、汽车制造等行业提供了高灵敏…...
深度学习之模型压缩三驾马车:模型剪枝、模型量化、知识蒸馏
一、引言 在深度学习中,我们训练出的神经网络往往非常庞大(比如像 ResNet、YOLOv8、Vision Transformer),虽然精度很高,但“太重”了,运行起来很慢,占用内存大,不适合部署到手机、摄…...
TCP/IP 网络编程 | 服务端 客户端的封装
设计模式 文章目录 设计模式一、socket.h 接口(interface)二、socket.cpp 实现(implementation)三、server.cpp 使用封装(main 函数)四、client.cpp 使用封装(main 函数)五、退出方法…...
【大模型】RankRAG:基于大模型的上下文排序与检索增强生成的统一框架
文章目录 A 论文出处B 背景B.1 背景介绍B.2 问题提出B.3 创新点 C 模型结构C.1 指令微调阶段C.2 排名与生成的总和指令微调阶段C.3 RankRAG推理:检索-重排-生成 D 实验设计E 个人总结 A 论文出处 论文题目:RankRAG:Unifying Context Ranking…...
raid存储技术
1. 存储技术概念 数据存储架构是对数据存储方式、存储设备及相关组件的组织和规划,涵盖存储系统的布局、数据存储策略等,它明确数据如何存储、管理与访问,为数据的安全、高效使用提供支撑。 由计算机中一组存储设备、控制部件和管理信息调度的…...
