动态显示数字

效果描述：一个数字从0动态变化到自己设置的值

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>数字动态改变效果-01</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .box{
                height: 50px;
                width: 300px;
                border: 1px solid #CCCCCC;
                margin:50px auto;
            }
            .box > span{
                display: block;
                height: 18px;
                width: 14px;
                border: 1px solid red;
                float: left;
                overflow: hidden;
            }
            .numbers{
                transition: all 1s ease;
                -webkit-transition: all 1s ease;
                transform: translateY(0);
                -webkit-transform: translateY(0);
            }
        </style>
    </head>
    <body>
        <div class="box">
            <span class="one">
                <img class="numbers" src="numbers.png" />
            </span>
            <span class="two">
                <img class="numbers" src="numbers.png" />
            </span>
        </div>
        
        <script>
            window.onload=function(){
                var shi = document.querySelectorAll('.numbers')[0];
                var ge = document.querySelectorAll('.numbers')[1];
                
                var one = 8;
                var two = 3;
                
                shi.style.webkitTransform = 'translateY(-'+ one*40 +'px)'
                ge.style.webkitTransform = 'translateY(-'+ two*40 +'px)'
            }
        </script>
    </body>
</html>

效果：

posted @ 2017-04-26 18:38  喜欢骑车的大冬瓜  阅读(222)  评论(0)  编辑  收藏  举报