css3动画，一张背景图两行图片

最新推荐文章于 2024-07-28 20:04:07 发布

sdfujichao

最新推荐文章于 2024-07-28 20:04:07 发布

阅读量958

点赞数 1

分类专栏： css3 文章标签： css3动画

本文链接：https://blog.csdn.net/sdfujichao/article/details/51863562

版权

css3 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

这个css3动画的实现和上一篇的css3动画的实现原理是一样的。不同的是这个动画的背景图片是一张两行图片的背景图。不用过原理还是一样的。最终要的是对背景图片的位置坐标的计算，一定要设置正确。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.box{background: url(img/1.jpg) no-repeat; margin: 0 auto; background-position: 0,0; overflow: hidden; width:134px; height: 149px; border: 1px solid black;}
			@keyframes  run{
				0%{background-position: 0px,0px;}
				6.7%{background-position: -134px,0px;}
				13.3%{background-position: -268px,0px;}
				20%{background-position: -402px,0px;}
				26.7%{background-position: -538px,0px;}
				33.3%{background-position: 0px,149px;}
				40.0%{background-position: -134px,149px;}
				46.7%{background-position: -268px,149px;}
				53.3%{background-position: 402px,149px;}
				60%{background-position: -538px,149px;}
				66.7%{background-position: 0px,298px;}
				73.3%{background-position: -134px,298px;}
				80%{background-position: -268px,298px;}
				86.7%{background-position: -402px,298px;}
				93.3%{background-position: -538px,298px;}
				100%{background-position: 0px,0px;}
			}
			.box{
				animation: run 1s step-end 0.3s infinite;
			}
		</style>
	</head>
	<body>
		<div class="box">
			
		</div>
	</body>
	<script type="text/javascript">
//		var num = 1/15;
//		for(var i=0;i<=15;i++){
//			console.log(num*i)
//		}
	
	
		var len = 447/3;
		console.log(len)
	</script>
</html>