用简单的代码让一组静态图片变成gif动画

最新推荐文章于 2024-08-15 16:32:01 发布

笑疯洋洋

最新推荐文章于 2024-08-15 16:32:01 发布

阅读量1.1w

点赞数

分类专栏： html+css

本文链接：https://blog.csdn.net/wl11295210/article/details/54927051

版权

html+css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

比如这组图片：

变成这样的gif动画：

是不是很神奇。。。。

先看html 、样式。很简单，一个div，然后引入图片。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>动态效果</title>
		<style type="text/css">
			.anim{
				width :200px;
				height : 300px;
				background:url(animl1.jpg) ;
				background-position : 0px 0px;
			}
	
		</style>
	</head>
	<body>
		<div class="wrapper">			
			<div class="anim"></div>			
		</div>
		
	 </body>
</html>

再看js：

var anim = document.querySelector(".anim");

var left = 0;

setInterval(function(){
	left +=200;
	if(left==1600){
		left = 0;
	}

anim.style.backgroundPosition = -left+"px 0px";
},100);

这就OK了！

原理在于background-position（背景图像的起始位置）设置200px的宽度主要是因为这组每一部分宽度为200px，根据background-position的作用，在定义left的偏移量。为什么最后left前面要加上-呢？这组图片是递进关系，随着往右的偏移，背景图片在向左递减。比如background-position：200px 0px；它是以容器的左上角为参考，向左偏移200px，也就成为这样：

第一幅图就向左偏移200px，消失在显示范围内了。

然后当它为-1600px时，到达最后一幅图，把left设置0，又重新开始。再根据setInterval()方法，无限循环，就得到了gif动态效果。