动态显示数字

最新推荐文章于 2023-02-24 13:48:55 发布

dingshi7699

最新推荐文章于 2023-02-24 13:48:55 发布

阅读量254

点赞数

原文链接：http://www.cnblogs.com/norcoA3/p/6770103.html

版权

效果描述：一个数字从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>

效果：

转载于:https://www.cnblogs.com/norcoA3/p/6770103.html

dingshi7699

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
动态显示数字

效果描述：一个数字从0动态变化到自己设置的值代码：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>数字动态改变效果-01</title> <style>...
复制链接

扫一扫