<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>
