毛毛虫特效动画

毛毛虫特效

开发工具与关键技术：DW . Web
作者：陈荣基
撰写时间：2019年1月19号
一.完成特效代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>毛毛虫特效</title>
<style>
	div{
		width: 200px;
		height: 200px;
		border-radius: 50%;
		position: relative;
	}
	img{
		width: 200px;
		height: 200px;
		border-radius: 50%;
		position: absolute;
		left: 0;
		top:0;
	}
	@keyframes img5{
		0%{
		    transform: translate(0,0);
		}
		20%{
			transform: translate(1600px,0);
		}		
		40%{
			transform: translate(1600px,800px);
		}		
		60%{
			
			transform: translate(0,800px);
		}		
		80%{
			transform: translate(0,0);
		}		
		100%{
			transform: translate(0,0);
		}
	}	
</style>
</head>
<body>
<div id="box">
	<img src="TB1AD9sKXXXXXcAXFXXXXXXXXXX_!!0-item_pic.jpg_320x320.jpg" alt="" id="img1">
	<img src="TB1f869KVXXXXb8XVXXYXGcGpXX_M2.SS2_320x320.jpg" alt="" id="img2">
	<img src="TB1hKZMMpXXXXadXpXXXXXXXXXX_!!0-item_pic.jpg" alt="" id="img3">
	<img src="TB1jbJFMFXXXXXBXVXXXXXXXXXX_!!0-item_pic.jpg_320x320.jpg" alt="" id="img4">
	<img src="TB1LOAhKFXXXXXcaXXXXXXXXXXX_!!0-item_pic.jpg_320x320.jpg" alt="" id="img5">
</div>
<script>
	var box=document.getElementById("box");
	var img1=document.getElementById("img1");
	var img2=document.getElementById("img2");
	var img3=document.getElementById("img3");
	var img4=document.getElementById("img4");
	var img5=document.getElementById("img5");
	box.onclick=function(){
		img1.style.transform="translate(0,0)";
		img1.style.transition="transform 5s ease-in-out";
		img2.style.transform="translate(0,200px)";
		img2.style.transition="transform 5s ease-in-out";
		img3.style.transform="translate(0,400px)";
		img3.style.transition="transform 5s ease-in-out";
		img4.style.transform="translate(0,600px)";
		img4.style.transition="transform 5s ease-in-out";
		img5.style.transform="translate(0,800px)";
		img5.style.transition="transform 5s ease-in-out";
		img1.style.animation="img5 25s 5s ease-in-out infinite";
		img2.style.animation="img5 25s 5.3s ease-in-out infinite";
		img3.style.animation="img5 25s 5.66s ease-in-out infinite";
		img4.style.animation="img5 25s 5.9s ease-in-out infinite";
		img5.style.animation="img5 25s 6.2s ease-in-out infinite";
	}
</script>
</body>
</html>
二.完成特效用到的样式属性
1.transform（动画属性）
			transform: translate();（位移）
			transform: rotate();（旋转）
			transform: scale();（放缩）
			transform: skewX();（x轴扭曲）
			transform: skewY(y轴扭曲);
2.animation （关键帧动画属性，要结合@keyframes一起使用）
三.完成特效的原理：
通过js代码控制动画属性的位移和结合关键帧动画属性设置不同的触发时间
来完成无限触发的毛毛虫特效动画（infinite关键帧动画无限触发效果的属性代码）
完成特效用到的图片

在这里插入图片描述
毛毛虫特效

猜你喜欢
