css3数字滚动特效

最新推荐文章于 2025-07-19 15:44:44 发布

原创最新推荐文章于 2025-07-19 15:44:44 发布 · 2.8k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#css3

CSS3 专栏收录该内容

9 篇文章

订阅专栏

这篇博客展示了如何使用Vue创建一个组件，该组件能够实现数字滚动的效果。当数值变化时，每个格子中的数字会从0开始向上滚动到实际的数值位置。代码中涉及的数据绑定、计算属性以及定时器的使用确保了数字滚动的动态更新。样式部分通过CSS实现了数字框的背景、布局和滚动动画。

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

一个格子：
效果：
在这里插入图片描述

代码：

props：['value'],
data(){
	return {
		pretime: undefined,
	    numbers:[0,0,0,0,0,0],
	    numLenth:0,
	}
},
 created () {
    setTimeout(()=>{
      this.number = this.value
    },500)
  },

<template>
  <div class="chartNum">
    <div class="box-item">
        <li :class="['number-item', 'mark-item']">
          <span v-if="value">
            <i ref="numberItem" :style="{transform:`translate(-50%, -${number * 10}%)`}">0123456789</i>
          </span>
          <span class="comma" v-else>{{number}}</span>
        </li>
    </div>
  </div>
</template>
<style scoped lang='scss'>
    .box-item {
        position: relative;
        height:35px;
        font-size: 54px;
        line-height: 41px;
        text-align: center;
        list-style: none;
        color: rgb(255,255,0);
        writing-mode: vertical-lr;
        text-orientation: upright;
        /*文字禁止编辑*/
        -moz-user-select: none; /*火狐*/
        -webkit-user-select: none; /*webkit浏览器*/
        -ms-user-select: none; /*IE10*/
        -khtml-user-select: none; /*早期浏览器*/
        user-select: none;
        /* overflow: hidden; */
    }
    /*滚动数字设置*/
    .number-item {
        list-style: none;
        width: 35px;
        height: 35px;
        background-image: url('/static/img/image/数字框1.jpg');
        background-size:100% 100% ;
        margin-right: 3px;
        color: rgb(255,255,0);
        font-weight: bold;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 22px;
        & > span {
            position: relative;
            display: block;
            width: 100%;
            height: 100%;
            writing-mode: vertical-rl;
            text-orientation: upright;
            overflow: hidden;
            & > i {
                font-style: normal;
                position: absolute;
                top: 5px;
                left: 50%;
                transition:transform 2s ease-in-out;
                transform: translate(-50%,0);
                letter-spacing: 10px;
            }
        }
        .comma{
          text-align: center;
          padding-left: 5px;
        }
    }
    .number-item:last-child {
        margin-right: 0;
    }
</style>

多个格子：
效果：
每个格子里的数字，如果大于0就会从0向上滚动到数字的位置
在这里插入图片描述

代码：

//因为是组件
props：['value'],
data(){
	return {
		pretime: undefined,
	    numbers:[0,0,0,0,0,0],
	    numLenth:0,
	}
},
computed:{
	_value:{
    get(){
      let arr = []
      this.numLenth = String(this.value).length
      if(this.value){
        for(var i = 0 ;i<this.numLenth;i++){
          arr.push(String(this.value).substr(i,1))
        }
      }
      if(arr.length<6){
        let len = 6-arr.length
        for(var j = 0;j<len;j++){
          arr.unshift(0)
        }
      }else{
        arr = arr.splice(0,6)
      }
      return arr
    }
  }
}

created () {
    setTimeout(()=>{
      let Arr =  this._value
      for(var i=0;i<Arr.length;i++){
        this.numbers[i] = Arr[i]
      }
      this.numbers = this.numbers.concat([])
    },500)
  },

<template>
  <div class="chartNum">
    <div class="box-item">
        <li :class="['number-item', 'mark-item']" v-for="(number,index) in _value" :key="index">
          <span v-if="number">
            <i ref="numberItem" :style="{transform:`translate(-50%, -${numbers[index] * 10}%)`}">0123456789</i>
          </span>
          <span class="comma" v-else>{{number}}</span>
        </li>
    </div>
  </div>
</template>

<style scoped lang='scss'>
    .box-item {
        position: relative;
        height:33px;
        font-size: 54px;
        line-height: 41px;
        text-align: center;
        list-style: none;
        color: rgb(255,255,0);
        writing-mode: vertical-lr;
        text-orientation: upright;
        /*文字禁止编辑*/
        -moz-user-select: none; /*火狐*/
        -webkit-user-select: none; /*webkit浏览器*/
        -ms-user-select: none; /*IE10*/
        -khtml-user-select: none; /*早期浏览器*/
        user-select: none;
        /* overflow: hidden; */
    }
    /*滚动数字设置*/
    .number-item {
        list-style: none;
        width: 33px;
        height: 33px;
        background-image: url('/static/img/image/数字框1.jpg');
        background-size:100% 100% ;
        margin-right: 3px;
        color: rgb(255,255,0);
        font-weight: bold;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 22px;
        & > span {
            position: relative;
            display: inline-block;
            width: 100%;
            height: 100%;
            writing-mode: vertical-rl;
            text-orientation: upright;
            overflow: hidden;
            & > i {
                font-style: normal;
                position: absolute;
                top: 5px;
                left: 50%;
                transition:transform 1s ease-out;
                transform: translate(-50%,0);
                letter-spacing: 10px;
            }
        }
        .comma{
          padding-left: 7px;
          padding-top: 3px;
        }
    }
    .number-item:last-child {
        margin-right: 0;
    }
</style>