三、自适应雪碧图

用雪碧图做精灵动画会有一个问题:
必须通过绝对尺寸获取图片坐标,否则就会出错,大多情况下可能会准备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>

推荐阅读更多精彩内容

  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 623评论 0 2
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 665评论 0 9
  • 1、属性选择器:id选择器 # 通过id 来选择类名选择器 . 通过类名来选择属性选择器 ...
    圆圆和方方阅读 463评论 0 7
  • 转载请声明 原文链接 关注公众号获取更多资讯 这篇文章主要总结H5的一些新增的功能以及一些基础归纳,这里只是一个提...
    poetries阅读 7,022评论 23 220
  • 入站人海乱流淌,暖心直达父老地。 进回无规挤门前,遭受胖兄无来去。 上不去,我无怨,即使多事懂律...
    安鸿阳阅读 33评论 0 0