一、预览效果

在这里插入图片描述

二、全部代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
				line-height: 1;
			}
			html,body{
				width: 100%;
				height: 100%;
			}
			.box{
				overflow: hidden;
				width: 100%;
				height: 100%;
				display: flex;
				position: relative;
				align-items: flex-end;
				 background: linear-gradient(to bottom, #8ec7c8 0%,#ffffff 100%);
			}
			.ground{
				height: 130px;
				background: green;
				width: 100%;
				border-top: 5px solid #550000;
			}
			.planes{
				position: absolute;
				top: 300px;
				left: 300px;
				z-index: 100;
				width: 250px;
				animation: planeFei ease-in-out 2s infinite;
			}
			.planes>img{
				width: 100%;
			}
			.planes>div{
				width: 200px;
				height: 8px;
				margin-left: 30px;
				background: #550000;
				animation: routes ease-in-out 0.5s infinite;
			}
			@keyframes routes{
				0%{
					transform: rotateY(0deg);
				}
				50%{
					transform: rotateY(180deg);
				}
				100%{
					transform: rotateY(0deg);
				}
			}
			@keyframes planeFei{
				0%{
					top: 300px;
				}
				50%{
					top:250px;
				}
				100%{
					top: 300px;
				}
			}
			.cloud{
				position: absolute;
				top:100px;
				right: -130px;
				z-index: 600;
				width: 130px;
			}
			.cloundOne{
				animation: cloudAni linear 3s infinite;
			}
			.cloudTwo{
				top: 300px !important;
				animation: opctiAni linear 3s infinite;
				animation-delay: 0.5s;
			}
			@keyframes opctiAni{
				0%{
					right: -130px;
				}
				73%{
					opacity: 1;
				}
				74%{
					opacity: 0.2;
				}
				80%{
					opacity: 1;
				}
				100%{
					right: 100%;
				}	
			}
			@keyframes cloudAni{
				0%{
					right: -130px;
				}
				100%{
					right: 100%;
				}
			}
			.cloud>div{
				width: 75px;
				height: 75px;
				position: absolute;
				top:0;
				border-radius: 50%;
				background-color: #fff;
			}
			.cloud>div:not(:first-child){
				top: 40px;
			}
			
			.cloud>div:nth-of-type(1){
				left: 50%;
				transform: translateX(-50%);
			}
			.cloud>div:nth-of-type(2){
				left: 0;
			}
			.cloud>div:nth-of-type(3){
				right: 0;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="planes">
				<div></div>
				<img src="./img/plane.png" />
			</div>
			<div class="cloud cloundOne">
				<div></div>
				<div></div>
				<div></div>
			</div>
			<div class="cloud cloudTwo">
				<div></div>
				<div></div>
				<div></div>
			</div>
			<div class="ground"></div>
		</div>
	</body>
</html>

三、飞机素材

在这里插入图片描述

# css3 # 动画 # css
Logo
腾讯云开发者社区

腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。

更多推荐

Springboot+MySQL 实现从数据库获取数据展示到前端

1.运行效果效果图如下：2.创建数据库表数据库名为"springboot",数据库表名为"user"，数据库表里面放了5条数据，字段分别为：“id”，“name”，“age”，“email”。3.新建SpringBoot项目1、选择Spring Initial...

avatar 腾讯云开发者社区
cover

腾讯云建官网：一个完整的自助建站的过程，不用代码，2小时就可以制作自己的网站

avatar 腾讯云开发者社区

数据库 实验二 数据库的简单查询和连接查询实验

– l）用Transact-SQL语句表示下列操作．在学生选课库中实现其数据查询操作．– ①求数学系学生的学号和姓名。select sno,sname from student where sdept='MA';– ②求选修了课程的学生学号。select distinct sno from sc;– ③求选修C1课程的学生学号和成绩，并要求对查询结果按成绩降序排列，如果成绩相同则按学号升序排列。s

avatar 腾讯云开发者社区