一、预览效果

在这里插入图片描述

二、全部代码

<!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>

三、飞机素材

在这里插入图片描述

Logo

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

更多推荐