奇妙的滚动css+html
2024-08-31 06:35:57
<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>
最新文章
- 编写简单的ramdisk（选择IO调度器）
- 局域网内利用gitlab,jenkins自动生成gitbook并发布(nginx)
- Repeater控件用法
- Css动画形式弹出遮罩层，内容区上下左右居中于不定宽高的容器中
- cmd中用PING命令时,出现'Ping' 不是内部或外部命令 解决方案
- Elasticsearch入门必备——ES中的字段类型以及常用属性
- 入门：HTML表单与Java 后台交互(复选框提交)
- BestCoder 1st Anniversary B.Hidden String DFS
- shell脚本变量定义注意别跟系统变量重名了……
- 自从用了Less 编写css，你比以前更快了~
- [references] How to Do Research
- Mysql_安装
- Redis 实现安全队列
- 第三篇-以LinearLayout进行Android界面设计
- Java的if判断对象为null时，null放在比较运算符的左边还是右边较好？
- 在Amazon FreeRTOS V10中使用运行时统计信息
- ps高级磨皮的7个步骤
- 有哪些操作会使用到TempDB；如果TempDB异常变大，可能的原因是什么，该如何处理（转载）
- vmware添加磁盘后linux无需重启识别的方法
- angular 4 和django 1.11.1 前后端交互 总结