小程序开发日记（二）：雪碧图快速调试

首先一张雪碧图：

分辨率为7874*241，换算成px为3937.5px*120.5px，为整张雪碧图的高与宽；

雪碧图共有21个动作，则每个动作的宽度为3937.5/21 = 187.5px；

css代码如下：

.test{
    background: url('https://astronomy.spitech.com.cn/upfile/php5uyNE7_1525226914365.png');
    width: 187.5px;
    height: 120.5px;
    background-size: 3937.5px 120.5px;
    -webkit-animation: demo 1.5s steps(21) infinite;
}

@-webkit-keyframes demo{
    0%{ background-position: 0 0 }
    100%{ background-position: -3937.5px 0}
}

html：

<view class="test-container">
    <view class="test"></view>
</view>