Css3飞机动画特效

最新推荐文章于 2023-02-27 11:24:47 发布

前端阿皓

最新推荐文章于 2023-02-27 11:24:47 发布

阅读量677

点赞数 1

分类专栏： CSS3动画特效文章标签： css3 动画 css

本文链接：https://blog.csdn.net/TanHao8/article/details/121881091

版权

CSS3动画特效专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、预览效果

在这里插入图片描述

二、全部代码

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

三、飞机素材

在这里插入图片描述

前端阿皓

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
Css3飞机动画特效

一、预览效果二、全部代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> *{ margin: 0; padding: 0; line-height: 1; } html,body{ width: 100%; height: 100%; }
复制链接

扫一扫