火箭飞行动画效果实现

最新推荐文章于 2021-11-01 12:54:02 发布

Wrj6811

最新推荐文章于 2021-11-01 12:54:02 发布

阅读量579

点赞数 2

分类专栏： css 前端小功能文章标签： css html animation

本文链接：https://blog.csdn.net/Wrj6811/article/details/107398217

版权

前端小功能同时被 2 个专栏收录

22 篇文章 1 订阅

订阅专栏

css

13 篇文章 0 订阅

订阅专栏

使用css动画实现火箭飞行的动画

页面布局代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>火箭飞行动画</title>
		<link rel="stylesheet" type="text/css" href="../lib/css/rocket.css"/>
	</head>
	<body>
		<div class="scene">
			<div class="rocket">
				<img src="../lib/image/rocket.jpg" >
			</div>
		</div>
	</body>
	<script type="text/javascript">
		function stars(){
			let count = 50;
			let scene = document.querySelector('.scene');
			let i = 0;
			while(i < count){
				let star = document.createElement('i');
				let x = Math.floor(Math.random() * window.innerWidth);
				let duration = Math.random() * 1;
				let h = Math.random() * 100;
				star.style.left = x + 'px';
				star.style.width = 1 + 'px';
				star.style.height = h + 'px';
				star.style.animationDuration = duration + 's';
				scene.appendChild(star);
				i++;
			}
		}
		stars();
	</script>
</html>

css代码

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
.scene{
	position: relative;
	width: 100%;
	height: 100vh;
	background: #01070a;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
}
.scene i {
	position: absolute;
	top: -250px;
	background: rgba(255,255,255,0.5);
	animation: animateStars linear infinite;
}
@keyframes animateStars{
	0%{
		transform: translateY(0);
	}
	100%{
		transform: translateY(200vh);
	}
}
.scene .rocket{
	position: relative;
	animation: animate 0.2s ease infinite;
}
@keyframes animate{
	0%{
		transform: translateY(-2px);
	}
	50%{
		transform: translateY(2px);
	}
}
.scene .rocket::before{
	content: '';
	position: absolute;
	bottom: -150px;
	left: 50%;
	transform: translateX(-50%);
	width: 10px;
	height: 150px;
	background: linear-gradient(#00d0ff,transparent);
	/* filter: blur(20px); */
}
.scene .rocket::after{
	content: '';
	position: absolute;
	bottom: -200px;
	left: 50%;
	transform: translateX(-50%);
	width: 10px;
	height: 200px;
	background: linear-gradient(#00d0ff,transparent);
	filter: blur(20px);
}

火箭图片

效果图

Wrj6811

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
火箭飞行动画效果实现

使用css动画实现火箭飞行的动画页面布局代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>火箭飞行动画</title> <link rel="stylesheet" type="text/css" href="../lib/css/rocket.css"/> </head> <body> <
复制链接

扫一扫