用雪碧图做精灵动画会有一个问题：
必须通过绝对尺寸获取图片坐标，否则就会出错，大多情况下可能会准备2套图片,如果不这样做，在分辨率缩放的情况下，精灵图就显得不对称了。
针对这样的情况，有2种方案可以解决，一种是基于CSS3的scale处理直接可以让元素缩放，另一种就是通过background-size背景图让精灵图实现自适应缩放。
背景图自适应方案：
上图是4*1矩阵图片，一般想让背景图填充整个元素在css3中可以通过background-size:100% 100%处理，但是使用雪碧图显然不想让整图去填充元素，
如何让单图填充一个元素呢?
我们可以把整图整体缩放，横竖按照矩形的数量比缩放100%。按照矩形的排列整体缩放背景图：
background-size: 400% 100%;
这才是最关键的一步，这样单个元素显示一张图，到了这一步估计大家都猜出来了，很简单了，通过百分比去取图了
接下来，我们可以很愉快的去改造精灵动画
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自适应雪碧图</title>
</head>
<style type="text/css">
.leopard {
width: 6rem;
height: 2rem;
top: 10%;
position: absolute;
z-index: 10;
background:
background-size: 400% 100%;
}
.leopardRun {
/*写法1*/
-moz-animation-name: leopard-fast;
-moz-animation-duration: 400ms;
-moz-animation-timing-function: steps(1,start);
-moz-animation-iteration-count: infinite;
/*写法2*/
-webkit-animation:leopard-fast 400ms steps(4) infinite;
}
@-webkit-keyframes leopard-fast {
0%{background-position:-0% 0%;}
100%{background-position:-400% 0%;}
}
@-moz-keyframes leopard-fast {
0% {
background-position: -0% 0%;
}
25% {
background-position: -100% 0%;
}
50% {
background-position: -200% 0%;
}
75% {
background-position: -300% 0%;
}
100% {
background-position: -400% 0%;
}
}
</style>
<body>
<body>
<div> 尺寸增加后，精灵图正常</div>
<div class="leopard leopardRun"></div>
</body>
<script type="text/javascript">
var docEl = document.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
//设置根字体大小
docEl.style.fontSize = 20 * (docEl.clientWidth / 320) + 'px';
};
//绑定浏览器缩放与加载时间
window.addEventListener(resizeEvt, recalc, false);
document.addEventListener('DOMContentLoaded', recalc, false);
</script>