奇妙的滚动css+html
生活随笔
收集整理的這篇文章主要介紹了
奇妙的滚动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>
總結
以上是生活随笔為你收集整理的奇妙的滚动css+html的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 使用 Electron 从协议处理器启动
- 下一篇： PHP基础面试题(1-10)