我就先直接上代碼了吧~
實(shí)現(xiàn)原理是使用background的background-position-Y屬性每隔100毫秒或者50毫秒增加background-position-Y的值睁本，背景圖一定要是雪碧圖哦～

自定義組件內(nèi)：
<template>
<div class="tiger_box">
  <img src="https://ojlf2aayk.qnssl.com/20180328squerleft.png" class="leftIcon">
  <img src="https://ojlf2aayk.qnssl.com/20180328squeright.png" class="rightIcon">
  <img src="https://ojlf2aayk.qnssl.com/20180328top.png" class="topIcon">
  <img src="https://ojlf2aayk.qnssl.com/20180328down.png" class="bottomIcon">
  <ul class="one">
    <li class="second" v-for="(item,index) in options" :key="index" :style="{background: 'url(' + item.img + ')',backgroundSize: '100% 100%',backgroundPositionY: run ? drawn ? (rotateDeg + index * 3)  + 'rem' : (rotateDeg + index) + 'rem' : 0, transitionProperty : isTranstion ? 'all' : 'none', transitionDelay: index * 100 + 'ms', transitionDuration: speed + 's'}">
      <img src="https://ojlf2aayk.qnssl.com/20180328currentline.png" v-if="index !== 0" style="width: .02rem; margin-top: .05rem;">
    </li>
  </ul>
</div>
</template>

<script>
export default {
  props: {
    isTranstion: {
      type: Boolean,
      default: true
    },
    run: {
      type: Boolean,
      default: false
    },
    drawn: {
      type: Boolean,
      default: false
    },
    rotateDeg: {
      type: Number,
      default: 0
    },
    background: {
      type: String,
      default: ''
    },
    speed: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      options: [
        {
          img: this.background
        },
        {
          img: this.background
        },
        {
          img: this.background
        }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
.tiger_box {
    position: relative;
    margin-top: -93%;
    width: 57.5%;
    margin-left: 20.5%;
    border-radius: 0.1rem;
    height: 1rem;
    overflow: hidden;
    float: left;
    .leftIcon {
        position: absolute;
        width: 0.07rem;
        left: 0;
        z-index: 1;
        top: 0.43rem;
    }
    .rightIcon {
        position: absolute;
        width: 0.07rem;
        right: 0;
        z-index: 1;
        top: 0.43rem;
    }
    .topIcon {
        width: 100%;
        position: absolute;
        top: 0;
        z-index: 9;
    }
    .bottomIcon {
        width: 100%;
        position: absolute;
        bottom: 0;
        z-index: 9;
    }
    .one {
        width: 100%;
        height: 1rem;
        background-size: 100% 100%;
        float: left;
        background-attachment: scroll;
        -webkit-transform: transition3d(0, 0, 0);
        position: relative;
        overflow: hidden;
        border-radius: 0.08rem;
        .second {
            float: left;
            width: 33.3%;
            height: 3rem;
            background-size: 100% 100%;
            position: relative;
            overflow: hidden;
            img {
                width: 2px;
                margin-top: 0.05rem;
            }
        }
    }
}
</style>

頁(yè)面引用：
<route-frame :run="runStart" :drawn="isDraw" :background="image" :speed="10" :rotateDeg="rotateDeg" :isTranstion="isTranstion"></route-frame>

image.png

效果地址：https://m.qtshe.com/act/alipayNewAct

青團(tuán)社招聘：

招聘崗位：高級(jí)前端開(kāi)發(fā)工程師P5及以上

簡(jiǎn)歷投遞到：hr@qtshe.com || haochen@qtshe.com

職位描述：

1、建設(shè)工具著榴、提煉組件添履、抽象框架，促進(jìn)前端工程化脑又、服務(wù)化暮胧，持續(xù)提升研發(fā)效率，保障線上產(chǎn)品質(zhì)量

2问麸、構(gòu)建H5/PC應(yīng)用基礎(chǔ)設(shè)施往衷，主導(dǎo)建設(shè)前端各種發(fā)布/監(jiān)控等平臺(tái)，指導(dǎo)落實(shí)解決方案

3严卖、持續(xù)優(yōu)化前端頁(yè)面性能席舍，維護(hù)前端代碼規(guī)范，鉆研各種前沿技術(shù)和創(chuàng)新交互哮笆，增強(qiáng)用戶體驗(yàn)来颤、開(kāi)拓前端能力邊界