3-3 自适应雪碧图
本节编程练习不计算学习进度，请电脑登录imooc.com操作

自适应雪碧图

用雪碧图做精灵动画会有一个问题：

必须通过绝对尺寸获取图片坐标，否则就会出错，大多情况下可能会准备2套图片

在七夕主题中就存在这样一个没有解决的问题，所以在分辨率缩放的情况下，精灵图就显得不对称了。针对这样的情况，我特意研究了下，有2种方案可以解决，一种是基于CSS3的scale处理直接可以让元素缩放，另一种就是通过background-size 让精灵图实现自适应缩放。

背景图自适应方案：

看下通过background-size处理后的效果图，实现了缩放自适应了

来讲解下原理，说白了很简单先观察下矩阵的排量如上是行3 竖3 所以矩阵就是3*3的排列，但是这里只有8张图，一般想让背景图填充整个元素在css3中可以通过background-size:100% 100%处理显然不能让整图去填充元素，整图填充一个元素就是这效果
如何让单图填充一个元素呢? 这里我想到了一个办法，把整图整体缩放，额，就是整体缩放。。。3*3的矩阵，我横竖按照矩形的数量比缩放100%。按照矩形的排列整体缩放背景图：
background-size: 300% 300%;
这才是最关键的一步，这样单个元素显示一张图，到了这一步估计大家都猜出来了，很简单了，通过百分比去取图了
 
接下来，我们可以很愉快的去改造圣诞的精灵动画咯

任务

右边代码区域，有一张精灵图由3张图组成，现在通过关键帧制作3帧动画，需要写出对应的keyframes的规则，这里需要做背景图的自适应处理，所以需要按照百分比设置坐标。

index.html 
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  6.     <title>圣诞主题</title>
  7.     <style type="text/css">
  8.     .bird {
  9.        width: 3rem;
  10.         height: 3rem;
  11.         top: 10%;
  12.         position: absolute;
  13.         z-index: 10;
  14.         background: url(http://img1.sycdn.imooc.com//55ade1700001b38302730071.png);
  15.         background-size: 300% 100%;
  16.     }
  17.  
  18.     .birdFly {
  19.         /*写法1*/
  20.         -moz-animation-name: bird-slow;
  21.         -moz-animation-duration: 400ms;
  22.         -moz-animation-timing-function: steps(1,start);
  23.         -moz-animation-iteration-count: infinite;
  24.  
  25.         /*写法2*/
  26.         -webkit-animation:bird-slow 400ms steps(3) infinite;
  27.     }
  28.  
  29.  
  30.     </style>
  31. </head>
  32.  
  33. <body>
  34.     尺寸增加后，精灵图正常
  35.     <div class="bird birdFly"></div>
  36. </body>
  37. <script type="text/javascript">
  38. var docEl = document.documentElement,
  39.     resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
  40.     recalc = function() {
  41.         //设置根字体大小
  42.         docEl.style.fontSize = 20 * (docEl.clientWidth / 320) + 'px';
  43.     };
  44.  
  45. //绑定浏览器缩放与加载时间
  46. window.addEventListener(resizeEvt, recalc, false);
  47. document.addEventListener('DOMContentLoaded', recalc, false);
  48. </script>
  49.  
  50. </html>
  51.  
下一节