js利用多张图实现gif效果

1.js实现（实测效果不太好，一闪一闪的）

data:

imgUrl: [{ url: 'static/images/maskscroll/maskscroll_0.png' }, { url: 'static/images/maskscroll/maskscroll_1.png' }, { url: 'static/images/maskscroll/maskscroll_2.png' }, { url: 'static/images/maskscroll/maskscroll_3.png' }, { url: 'static/images/maskscroll/maskscroll_4.png' }, { url: 'static/images/maskscroll/maskscroll_5.png' }, { url: 'static/images/maskscroll/maskscroll_6.png' }, { url: 'static/images/maskscroll/maskscroll_7.png' }, { url: 'static/images/maskscroll/maskscroll_8.png' }, { url: 'static/images/maskscroll/maskscroll_9.png' }],
 imgIndex: 0,

mounted:

let _setInterval = setInterval(() => {
    this.imgIndex++;
    if (this.imgIndex > 9) {
        this.imgIndex = 0;
    }
}, 100);

html:

<div class="feiren" v-for="(item, index) in imgUrl"><img :src="item.url" class="img100" v-show="imgIndex == index"></div>

 2.将多张图片合并成一张雪碧图，用css控制

合成雪碧图链接：

CSS Sprites Generatorhttps://www.toptal.com/developers/css/sprite-generator代码：

.intone-loading-message-img {
    width: 260px;
    height: 260px;
    //此背景图就是合成的雪碧图，本代码只适用于不换行的雪碧图
    background: url(~@/static/images/maskscroll/maskscroll_feiren.png) left center no-repeat;
    background-size: 2600px auto;
    -webkit-animation: loadingRun 1.6s steps(10) infinite alternate;
    @keyframes loadingRun {
        to {
            background-position-x: -2600px;
        }
    }
}