比如这组图片：
变成这样的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动态效果。