<template>
  <div>
    <span class="toAD" v-for="(item, index) in value" :key="index">
      <div
              class="qwNumBox"
              style="width: 36px; height: 48px"
              v-for="(ite, inde) in item"
              :key="inde"
      >
        <div class="trasBox" :class="['rolling_' + ite]">
          <!-- <div class="qwnum">{{ ite }}</div> -->
          <div class="qwnum">0</div>
          <div class="qwnum">1</div>
          <div class="qwnum">2</div>
          <div class="qwnum">3</div>
          <div class="qwnum">4</div>
          <div class="qwnum">5</div>
          <div class="qwnum">6</div>
          <div class="qwnum">7</div>
          <div class="qwnum">8</div>
          <div class="qwnum">9</div>
        </div>
      </div>
      {{ index == 0 ? "天" : "" }}
      {{ index == 1 ? "时" : "" }}
      {{ index == 2 ? "分" : "" }}
      {{ index == 3 ? "秒" : "" }}
    </span>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        value: [
          ["0",'1','2','3', "4", "5", "6", "7"],
        ],
      };
    },
  };
</script>
<style scoped>
  .qwNumBox + .qwNumBox {
    margin-left: 5px;
  }

  .qwNumBox {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 48px;
    overflow: hidden;
    border: 1px solid rgba(72, 152, 241, 0.3);
    border-radius: 6px;
  }
  .trasBox {
    position: absolute;
    left: 0;
    top: 0;
    height: auto;
    width: 100%;
    transform-origin: 0 0;
    transition: top 0.8s;
  }

  .qwnum {
    width: 36px;
    height: 48px;
    line-height: 48px;
    background: rgba(72, 152, 241, 0.072);

    font-size: 36px;
    font-family: MicrosoftYaHei-Bold;
    font-weight: bold;
    color: #4898f1;
    text-align: center;
  }
  .toAD {
    margin-left: 12px;
  }
  .rolling_0 {
    animation: rolling_0 0s ease;
    transform: translate3d(0, -0px, 0);
  }
  @-webkit-keyframes rolling_0 {
    from {
      transform: translate3d(0, -720px, 0);
    }
    to {
      transform: translate3d(0, -0px, 0);
    }
  }
  .rolling_1 {
    animation: rolling_1 3s ease;
    transform: translate3d(0, -48px, 0);
  }
  @-webkit-keyframes rolling_1 {
    from {
      transform: translate3d(0, -0px, 0);
    }
    to {
      transform: translate3d(0, -48px, 0);
    }
  }
  .rolling_2 {
    animation: rolling_2 2.1s ease;
    transform: translate3d(0, -96px, 0);
  }
  @-webkit-keyframes rolling_2 {
    from {
      transform: translate3d(0, -0px, 0);
    }
    to {
      transform: translate3d(0, -96px, 0);
    }
  }
  .rolling_3 {
    animation: rolling_3 3s ease;
    transform: translate3d(0, -144px, 0);
  }
  @-webkit-keyframes rolling_3 {
    from {
      transform: translate3d(0, -0px, 0);
    }
    to {
      transform: translate3d(0, -144px, 0);
    }
  }
  .rolling_4 {
    animation: rolling_4 2.1s ease;
    transform: translate3d(0, -192px, 0);
  }
  @-webkit-keyframes rolling_4 {
    from {
      transform: translate3d(0, -0px, 0);
    }
    to {
      transform: translate3d(0, -192px, 0);
    }
  }
  .rolling_5 {
    animation: rolling_5 3s ease;
    transform: translate3d(0, -240px, 0);
  }
  @-webkit-keyframes rolling_5 {
    from {
      transform: translate3d(0, -0px, 0);
    }
    to {
      transform: translate3d(0, -240px, 0);
    }
  }
  .rolling_6 {
    animation: rolling_6 2.1s ease;
    transform: translate3d(0, -288px, 0);
  }
  @-webkit-keyframes rolling_6 {
    from {
      transform: translate3d(0, -0px, 0);
    }
    to {
      transform: translate3d(0, -288px, 0);
    }
  }
  .rolling_7 {
    animation: rolling_7 3.1s ease;
    transform: translate3d(0, -336px, 0);
  }
  @-webkit-keyframes rolling_7 {
    from {
      transform: translate3d(0, -0px, 0);
    }
    to {
      transform: translate3d(0, -336px, 0);
    }
  }
  .rolling_8 {
    animation: rolling_8 2.1s ease;
    transform: translate3d(0, -384px, 0);
  }
  @-webkit-keyframes rolling_8 {
    from {
      transform: translate3d(0, -0px, 0);
    }
    to {
      transform: translate3d(0, -384px, 0);
    }
  }
  .rolling_9 {
    animation: rolling_9 4.1s ease;
    transform: translate3d(0, -432px, 0);
  }
  @-webkit-keyframes rolling_9 {
    from {
      transform: translate3d(0, -0px, 0);
    }
    to {
      transform: translate3d(0, -432px, 0);
    }
  }
</style>
最后修改:2021 年 03 月 12 日 02 : 09 PM
如果觉得我的文章对你有用,请随意赞赏