其他分享
首页 > 其他分享> > # 火箭飞行动画制作

# 火箭飞行动画制作

作者:互联网

火箭飞行动画制作

html

<div class="scene">
       <div class="rocket">
           <img  width="100" src="./rocket.png" alt="rocket">
       </div>
   </div>

css

body{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.scene {
	position: relative;
	width: 100%;
	height: 100vh;
	background: #000;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.scene .rocket {
	position: relative;
	animation: animate 0.2s ease  infinite;
}

@keyframes animate{
	0%{
		transform: translateY(-2px);
	}
	50%{
		transform: translateY(2px);
	}
}

/* 分割线  下面是i标签的样式 需要js创建出对应动态i标签,渲染出下雨的特效,使之让火箭在雨中飞速穿梭效果*/

.scene i {
	position: absolute;
	top: -200px;
	background: rgba(255,255,255,0.5);
	animation: animates  linear  infinite;
}

@keyframes animates{
	from{
		transform: translateY(0);
	}
	to{
		transform: translateY(200vh);
	}
}

.rocket::before {
	content: '';
	position: absolute;
	bottom: -200px;
	left: 50%;
	transform: translateX(-50%);
	width: 10px;
	height: 200px;
	background: linear-gradient(#00d0ff,transparent);
	filter: blur(5px);
}

介绍下animation语法

animation: name duration timing-function delay iteration-count direction fill-mode play-state;
说明
animation-name指定要绑定到选择器的关键帧的名称
animation-duration动画指定需要多少秒或毫秒完成
animation-timing-function设置动画将如何完成一个周期
animation-delay设置动画在启动前的延迟间隔。
animation-iteration-count定义动画的播放次数。
animation-direction指定是否应该轮流反向播放动画。
animation-fill-mode规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。
animation-play-state指定动画是否正在运行或已暂停。
initial设置属性为其默认值。 阅读关于 initial的介绍。
inherit从父元素继承属性。 阅读关于 initinherital的介绍。

CSS3 transform 和 filter(滤镜) 属性

transform属性文档

filter属性


<script type="text/javascript">
			function start () {
				let count = 50;
				let i = 0;
          let scene = document.querySelector('.scene');
				while (i < count){
					let star = document.createElement('i');
					let w = Math.floor(Math.random() * window.innerWidth);
					let h = Math.random() * 100;
					let duartion = Math.random() * 1;
					
					star.style.width = 1 + 'px';
					star.style.height = 50 + h + 'px';
					star.style.left = w + 'px';
					star.style.animationDuration = duartion + 's';
					
					scene.appendChild(star);
					i++;
				}
			}
			start();
		</script>

火箭图片

标签:动画,star,scene,火箭,transform,animation,let,飞行
来源: https://blog.csdn.net/hkw20/article/details/118459107