vue 实现大屏数字滚动特效

最新推荐文章于 2025-04-30 14:27:52 发布

氪精大佬

最新推荐文章于 2025-04-30 14:27:52 发布

阅读量2.3k

点赞数 3

本文链接：https://blog.youkuaiyun.com/weixin_44000275/article/details/108973259

版权

本文介绍如何使用Vue和CSS3创建一款大屏数字滚动特效。通过Vue组件化开发，结合CSS3的过渡和动画属性，实现数字逐位滚动展示，为用户界面增添动态视觉体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图
在这里插入图片描述

代码

<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>