<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>
奇妙的滚动css+html
原文地址：http://www.cnblogs.com/jiebba/p/7651670.html