jquery实现一个数字滚动动画显示效果代码-html代码-BFW代码库

jquery实现一个数字滚动动画显示效果代码

代码语言：html

所属分类：动画

代码描述：jquery实现一个数字滚动动画显示效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">

    <style>
        *{
    	padding: 0;
    	margin: 0;
    }
    html,body{
    	width: 100%;
    	height: 100%;
    }
    .container{
    	width: 100%;
    	height: 100%;
    	background-color: #09152a;
    }
    /*-----数字---*/
    .number-box{
    	height: 3.3125em;
        display: flex;
        justify-content: center;
        padding-top: 1em;
    }
    .mt-number-animate {
        
        line-height: 3.125em;
        height: 100%;
        overflow: hidden;
        display: inline-block;
        position: relative;
    }
    .mt-number-animate .mt-number-animate-dot {
        width: 2.25em;
        /*设置分割符宽度*/
        line-height: 3.125em;
        float: left;
        text-align: center;
        color: #FDB628;
        margin-right: 0.5em;
    }
    
    .mt-number-animate .mt-number-animate-dom {
        width: 2.25em;
        /*设置单个数字宽度*/
        text-align: center;
        float: left;
        position: relative;
        top: 0;
        margin-right: 0.5em;
        
    }
    
    .mt-number-animate .mt-number-animate-dom .mt-number-animate-span {
        width: 100%;
        float: left;
        color: #FDB628;
        margin-bottom: 0.2em;
        height: 100%;
    }
    .num-flex{
        position: relative;
        font-size: 3em;
    }
    .border-module {
        position: relative;
        border: 0.0625em solid rgba(0,234,255,.25);
        -webkit-box-shadow: inset 0em 0em 1.25em rgb(0 234 255 / 25%);
        box-shadow: inset 0em 0em 1.25em rgb(0 234 255 / 25%);
    }
    .number-box .border-span2,
    .dataBoc .border-span2{
        position: absolute;
    	width: 0.2em;
        height: 0.2em;
    }
    .number-box .top-left2,
    .dataBoc .top-left2{
    	top: 0;
        left: 0;
        border-left: 0.045em solid #01bdc6;
    	border-top: 0.045em solid #01bdc6;
    }
    
    .number-box .top-right2,
    .dataBoc .top-right2 {
    	top: 0;
        right: 0;
        border-right: 0.045em solid #01bdc6;
    	border-top: 0.045em solid #01bdc6;
    }
    
    .number-box .bottom-left2,
    .dataBoc .bottom-lef.........完整代码请登录后点击上方下载按钮下载查看