【CSS】利用Vue实现数字翻滚动画效果

<template>
  <div class="flip-clock">
    <div class="number" v-for="n in 6" :key="n">
      <div class="slice" v-for="slice in slices" :key="slice" :style="{ transform: `rotateX(${slice * 60}deg)` }">
        <div class="digit" v-for="digit in 10" :key="digit">
          <span v-if="n === 6 && slice === 3 && digit === 7">{{ digit }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      slices: 4
    };
  }
};
</script>
 
<style scoped>
.flip-clock {
  /* 样式定义 */
}
.number {
  /* 样式定义 */
}
.slice {
  /* 样式定义 */
  animation: flip 5s infinite;
}
.digit {
  /* 样式定义 */
}
@keyframes flip {
  from {
    transform: rotateX(0deg);
  }
  to {
    transform: rotateX(360deg);
  }
}
</style>

这个代码实例展示了如何在Vue中使用模板语法来创建一个数字翻滚动画。它定义了一个名为 .flip-clock 的容器，该容器包含了多个 .number 块，每个 .number 块又包含了 .slice 层，每一层又包含了 .digit 数字。通过 @keyframes 定义了翻转动画，并且通过 :style 绑定将其应用于每个 .slice 层。这个例子简洁明了，展示了如何将CSS动画与Vue的模板语法相结合，创建出生动的用户界面效果。