雪碧图布局

最近公司项目需要增加一个需求，需要给组件设置动画类型，而每种动画类型都需要一个对应的动画图标，这里就使用了雪碧图。

一、什么是雪碧图

百度百科：CSS雪碧 即CSS Sprite，也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。

举个栗子：淘宝首页

上图中的图标，实际就是如下一张背景图

二、为什么要用雪碧图

减少Http请求数量，加速内容显示。因为每请求一次，就会和服务器建立一次链接，而建立链接是需要额外的时间的。

三、雪碧图布局

下面的代码为使用淘宝的背景图简单的实现以下效果

<template>
   <div class="anima">
    <ul class="list">
        <li class="list-1">
            <i></i>
            <p>充话费</p>
        </li>
         <li class="list-2">
            <i></i>
            <p>旅行</p>
        </li>
        <li class="list-3">
            <i></i>
            <p>车险</p>
        </li>
    </ul>
</div> 
</template>
<script>
export default {};
</script>
<style lang="less" scoped>
.anima {
  .list {
    li {
      cursor: pointer;
      width: 60px;
      height: 60px;
      text-align: center;
      float: left;
      i {
        background: url(/static/images/bj.png);
        display: block;
        width: 24px;
        height: 24px;
      }
      p {
        height: 24px;
        width: 100%;
        text-align: center;
        line-height: 24px;
      }
    }
    .list-1 {
      i {
        background-position: 0 0;
        margin-left: 20px;
      }
    }

    .list-2 {
      i {
        background-position: 0 -87px;
        margin-left: 20px;
      }
    }

    .list-3 {
      i {
        background-position: 0 -44px;
        margin-left: 20px;
      }
    }
  }
}
</style>

实现效果如下图

 最后：一般制作雪碧图的时每个小图标的宽高应该是一样的，方便我们定位~