三、自适应雪碧图

作者: 咕咚咚bells | 来源:发表于2016-10-19 19:44 被阅读270次

三、自适应雪碧图
css-Sprite （雪碧图）
CSS 雪碧图
二栏布局一栏自适应和三栏布局中间自适应
JS逆向：基于雪碧图的反爬策略与破解
什么叫 “雪碧图”？
亚马逊-雪碧图
任务9- CSS常见技巧
前端—雪碧图
饥人谷-任务9-2

用雪碧图做精灵动画会有一个问题：
必须通过绝对尺寸获取图片坐标，否则就会出错，大多情况下可能会准备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: url(https://docs.coronalabs.com/images/simulator/sprites-cat-running.png);
      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>