zoukankan      html  css  js  c++  java
  • 自动轮播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);

    参考地址

  • 相关阅读:
    选择省市区的组件
    element ui 合计/table show-summary
    双击放大预览功能/组件
    vue 中获取初始的值
    vue 兄弟组件之间通信
    js数组常用到的方法,及其注意事项
    ps
    最有效的学习方法
    css2
    prettytable:像数据库一样格式化输出内容
  • 原文地址:https://www.cnblogs.com/starryqian/p/11982262.html
Copyright © 2011-2022 走看看