CSS3简单实现,数字滚动效果

时间:2025-02-06 11:32:35

之前项目要做一个数字滚动效果。
因为需要一直滚动且过一段时间就要滚动,网上早的不太满足,而且为0也滚动,用css+jq写了一下。

首先每一个数字拆成单个数字。

我这边9个数字,根据自己需要添加。
/*数字滚动效果*/
.allNumCon {
    /*display: block;*/
    display: -webkit-flex;
    display: flex;
    margin-top: 16px;
    margin-left: 10px;
}
.OneNumCon,
.OneNumCon_dou{
    font-family: DIN-Medium;/*字体自己选择*/
    display: inline-block;
    width: 55px;
    height: 80px;
    overflow: hidden;
    font-size: 80px;
    line-height: 80px;
    text-align: center;
    margin-right: 8px;
    /*background: url(../img/Income_bg.png);*/
    background: url(../img/Income_bg.png) center center no-repeat;/*每个数字的背景图片*/
    /*background-position: 0px 10px;*/
}
.OneNumCon_dou span {
    display: inline-block;
    margin-top: -10px;
}
.OneListNum {
    transform: translate3d(0,0,0)
}
.OneListNum div{
    height: 80px;
}
<div class="allNumCon" >
    <div class="OneNumCon">
        <div class="OneListNum">
            <div>0</div>
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
            <div>9</div>
        </div>
    </div>
<div class="OneNumCon_dou">
    <span>,</span>
    </div>
    <div class="OneNumCon">
        <div class="OneListNum">
            <div>0</div>
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
            <div>9</div>
        </div>
    </div>
    <div class="OneNumCon">
        <div class="OneListNum">
            <div>0</div>
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
            <div>9</div>
        </div>
    </div>
    <div class="OneNumCon">
        <div class="OneListNum">
            <div>0</div>
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
            <div>9</div>
        </div>
    </div>
    <div class="OneNumCon_dou">
     <span>,</span>
    </div>
    <div class="OneNumCon">
        <div class="OneListNum">
            <div>0</div>
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
            <div>9</div>
        </div>
    </div>
    <div class="OneNumCon">
        <div class="OneListNum">
            <div>0</div>
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
            <div>9</div>
        </div>
    </div>
    <div class="OneNumCon">
        <div class="OneListNum">
            <div>0</div>
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
            <div>9</div>
        </div>
    </div>
    <div class="OneNumCon_dou">
     <span>,</span>
    </div>
    <div class="OneNumCon">
        <div class="OneListNum">
            <div>0</div>
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
            <div>9</div>
        </div>
    </div>
    <div class="OneNumCon">
        <div class="OneListNum">
            <div>0</div>
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
            <div>9</div>
        </div>
    </div>
<div class="OneNumCon">
        <div class="OneListNum">
            <div>0</div>
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
            <div>9</div>
        </div>
    </div>
</div>




每个数字加个css3动画滚动。



/*需要浏览器后缀的自己添加*/
.rolling_0 { 
   
    animation: rolling_0 2.1s ease;
    -webkit-animation: rolling_0 2.1s ease;
}
.rolling_1 {
  
    animation: rolling_1 3s ease;
    -webkit-animation: rolling_1 3s ease;
}
.rolling_2 { 
   
    animation: rolling_2 3s ease;
    -webkit-animation: rolling_2 3s ease;
}
.rolling_3 { 
   
    animation: rolling_3 3s ease;
    -webkit-animation: rolling_3 3s ease;
}
.rolling_4 { 
   
    animation: rolling_4 3s ease;
    -webkit-animation: rolling_4 3s ease;
}
.rolling_5 {
  
    animation: rolling_5 3s ease;
    -webkit-animation: rolling_5 3s ease;
}
.rolling_6 {
 
    animation: rolling_6 3s ease;
    -webkit-animation: rolling_6 3s ease;
}
.rolling_7 {
    
    animation: rolling_7 3s ease;
    -webkit-animation: rolling_7 3s ease;
}
.rolling_8 {
    animation: rolling_8 3s ease;
    -webkit-animation: rolling_8 3s ease;
}
.rolling_9 {
   
    animation: rolling_9 3s ease;
    -webkit-animation: rolling_9 3s ease;
}
.rolling_10 {
    animation: rolling_10 1s ease;
    -webkit-animation: rolling_10 1s ease;
}




/*-webkit-*/
@-webkit-keyframes rolling_0 {
    from {
        transform:translate3d(0,-720px,0);
    }
    to {
        transform:translate3d(0,0px,0);
    }
}


@-webkit-keyframes rolling_1 {
    from {
        transform:translate3d(0,0px,0);
    }
    to {
        transform:translate3d(0,-80px,0);
    }
}
@-webkit-keyframes rolling_2 {
    from {
        transform:translate3d(0,0,0);
    }
    to {
        transform:translate3d(0,-160px,0);
    }
}
@-webkit-keyframes rolling_3 {
    from {
        transform:translate3d(0,0,0);
    }
    to {
        transform:translate3d(0,-240px,0);
    }
}
@-webkit-keyframes rolling_4 {
    from {
        transform:translate3d(0,0,0);
    }
    to {
        transform:translate3d(0,-320px,0);
    }
}
@-webkit-keyframes rolling_5 {
    from {
        transform:translate3d(0,0,0);
    }
    to {
        transform:translate3d(0,-400px,0);
    }
}
@-webkit-keyframes rolling_6 {
    from {
        transform:translate3d(0,0,0);
    }
    to {
        transform:translate3d(0,-480px,0);
    }
}
@-webkit-keyframes rolling_7 {
    from {
        transform:translate3d(0,0,0);
    }
    to {
        transform:translate3d(0,-560px,0);
    }
}
@-webkit-keyframes rolling_8 {
    from {
        -webkit-transform:translate3d(0,0,0);
    }
    to {
        -webkit-transform:translate3d(0,-640px,0);
    }
}
@-webkit-keyframes rolling_9 {
    from {
        transform:translate3d(0,0,0);
    }
    to {
        transform:translate3d(0,-720px,0);
    }
}


css动画速度时间函数,可自己定义。

然后jq或者js中添加删除class。

/*不满足位数补齐0,数字位数前面补零*/
 function fillZero(number, digits){  
    number = String(number);  
    var length = ;  
    if(<digits){  
        for(var i=0;i<digits-length;i++){  
            number = "0"+number;  
        }  
    }  
    return number;  
} 
//数字滚动
//传入具体数值,长度要匹配。
var sei_init_dataStatistics = null;
function init_dataStatistics(dataNum){
    var numStr = [];
    var dataNumStr = "" + fillZero(dataNum, 10);

    (dataNumStr);

    //数字字符串数字
    for (var i = 0, ln = ; i < ln; i++) {
        var oneDataNumStr = (i, i + 1);
        // (oneDataNumStr);
        if ('' != oneDataNumStr && null != oneDataNumStr) {
            (parseInt(oneDataNumStr));
        } else {
            ("数据异常");
            // (0);
            numStr = [0, 0, 0, 0, 0, 0, 0, 0, 0,0];
            break;
        }
    }
    
    $("#allNumCon .OneListNum").eq(0).addClass("rolling_"+numStr[0]);
    $("#allNumCon .OneListNum").eq(1).addClass("rolling_"+numStr[1]);
    $("#allNumCon .OneListNum").eq(2).addClass("rolling_"+numStr[2]);
    $("#allNumCon .OneListNum").eq(3).addClass("rolling_"+numStr[3]);
    $("#allNumCon .OneListNum").eq(4).addClass("rolling_"+numStr[4]);
    $("#allNumCon .OneListNum").eq(5).addClass("rolling_"+numStr[5]);
    $("#allNumCon .OneListNum").eq(6).addClass("rolling_"+numStr[6]);
    $("#allNumCon .OneListNum").eq(7).addClass("rolling_"+numStr[7]);
    $("#allNumCon .OneListNum").eq(8).addClass("rolling_"+numStr[8]);
    $("#allNumCon .OneListNum").eq(9).addClass("rolling_"+numStr[9]);
    var setInWid = 80;
    clearTimeout(sei_init_dataStatistics);
/*css3执行完各个数字滚动的赋值*/
    sei_init_dataStatistics = setTimeout(function(){
        $("#allNumCon .OneListNum").eq(0).css("transform","translate3d(0,-"+setInWid*numStr[0]+"px,0)");
        $("#allNumCon .OneListNum").eq(1).css("transform","translate3d(0,-"+setInWid*numStr[1]+"px,0)");
        $("#allNumCon .OneListNum").eq(2).css("transform","translate3d(0,-"+setInWid*numStr[2]+"px,0)");
        $("#allNumCon .OneListNum").eq(3).css("transform","translate3d(0,-"+setInWid*numStr[3]+"px,0)");
        $("#allNumCon .OneListNum").eq(4).css("transform","translate3d(0,-"+setInWid*numStr[4]+"px,0)");
        $("#allNumCon .OneListNum").eq(5).css("transform","translate3d(0,-"+setInWid*numStr[5]+"px,0)");
        $("#allNumCon .OneListNum").eq(6).css("transform","translate3d(0,-"+setInWid*numStr[6]+"px,0)");
        $("#allNumCon .OneListNum").eq(7).css("transform","translate3d(0,-"+setInWid*numStr[7]+"px,0)");
        $("#allNumCon .OneListNum").eq(8).css("transform","translate3d(0,-"+setInWid*numStr[8]+"px,0)");
        $("#allNumCon .OneListNum").eq(9).css("transform","translate3d(0,-"+setInWid*numStr[9]+"px,0)");
    },3000);
}



截取了我的部分代码,仅供参考。
纵向横向柱状图或者其他的效果,也可以这样写。
css3代码太长不粘贴了。
大概思路就是,0至100的动画animation和100个class类,时间速度曲线自己控制。