奇妙的滚动css+html

<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>GetUserMedia实例</title>
    <meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>
    <style>
        #test {height: 60px;width: 40px;margin: 0 0 0 150px;overflow: hidden;background-color: #32db64;position: relative;font-size: 12px;}
        #test span{display: inline-block;height: 20px;width: 40px;text-align: center}
        .box{position: absolute;left: 0;top: 20px;height: 20px;width: 100%;overflow: hidden;z-index: 5;background-color: #f53d3d;}
        .box .boxs{position: relative;top: -20px;font-size: 20px;line-height: 20px;}
        .boxs{transform: translateY(0px);
            -webkit-transition: all 3s;
            -moz-transition: all 3s;
            -ms-transition: all 3s;
            -o-transition: all 3s;
            transition: all 3s;}
        .boxs-active{transform: translateY(-140px)}
    </style>
</head>
<body>
    <div id="test">
        <div class="box">
            <div class="boxs">
                <span>1</span>
                <span>2</span>
                <span>3</span>
                <span>4</span>
                <span>5</span>
                <span>6</span>
                <span>7</span>
                <span>8</span>
                <span>9</span>
                <span>0</span>
            </div>
        </div>
        <div  class="boxs">
            <span>1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span>5</span>
            <span>6</span>
            <span>7</span>
            <span>8</span>
            <span>9</span>
            <span>0</span>
        </div>
    </div>
</body>
<script type="text/javascript">
    var test = document.getElementById('test');
    var box = document.querySelectorAll('.boxs');
    setTimeout(function (args) {
        box.forEach(function (v) {
            v.className = 'boxs-active boxs'
        })
    },500)

</script>

</html>