标签:实例 content gif text com tran index form pos
<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>
标签:实例 content gif text com tran index form pos
原文地址:http://www.cnblogs.com/jiebba/p/7651670.html