自动轮播swiper css实现

@keyframes scale {
  0% {
    transform: scale(1, 1);
    opacity: 0.5;
    z-index: 1;
    transition: opacity z-index transform 500ms "cubic-bezier(0,1,1,1)";
  }
  30% {
    opacity: 1;
  }
  60% {
    transform: scale(1.05);
    z-index: 1;
    opacity: 1;
    transition: opacity z-index transform 200ms "cubic-bezier(0,1,1,1)" 0.3s;
  }
  80% {
    transform: scale(1.05);
    z-index: 1;
    opacity: 1;
    transition: opacity z-index transform 200ms "cubic-bezier(0,1,1,1)" 0.3s;
  }
  100% {
    transform: scale(1.5);
    z-index: 1;
    transition: scale 100ms "cubic-bezier(0.5,0,0.2,1)";
  }
}

实现的播放动画效果

html

 <div class="swiper-container banner">
        <div class="swiper-wrapper">
          <div
            class="slide"
            v-for="(item,index) in banners"
            :key="index"
            :class="{'active':cur==index}"
            @click="go(item.url)"
            :style="{'background':'url('+item.img+')no-repeat','background-size':'cover','background-position':'center center'}"
          ></div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="page">
          <span
            v-for="(item,index) in banners"
            :class="{'active':cur==index}"
            :key="index"
            @click="cur=index"
          ></span>
        </div>

js

 this.timer2 = setInterval(() => {
      this.curs = this.curs <= 3 ? this.curs + 1 : 0;
    }, 3000);

 

参考地址