<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的更多相关文章

  1. jquery 文字向上滚动+CSS伪类before和after的应用

    汇总常用技巧——CSS伪类before和after的应用 先上效果图,建议遵循有图有真相的原则,可以上图的地方,还望不要嫌麻烦,毕竟有图的话 可以让读者少花些时间! <!DOCTYPE html ...

  2. 容器,表格 ,div,元素可左右拖动,滚动 css

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  3. 移动端h5下ul实现横向滚动css代码

    html代码: <ul id="category"> <li>品牌团</li> <li>美体个护</li> <li ...

  4. css设置背景固定不滚动效果的示例

    css设置背景固定不滚动效果的示例 背景固定不滚动各位看到最多的无非就是QQ空间了,我们在很多的空间都可以看到内容滚动而北京图片不滚动了,下文整理了几个关于背景固定不滚动css代码. 一.css设置背 ...

  5. DIV+CSS图片不间断滚动jquery特效(Marquee插件)及移动标签marquee整理

    推荐一个jQuery的无缝文字滚动效果,同时也可以滚动图片,也叫做跑马灯效果. 此jquery插件,依托jquery库,能实现各种滚动效果,且让HTML代码符合W3C标准. marquee标签:创建一 ...

  6. 移动端阻止body滚动

    一些移动设备有缺省的touchmove行为,比如说经典的iOS overscroll效果,当滚动超出了内容的界限时就引发视图反弹 阻止滚动: css: body{ height:100%; overf ...

  7. fullpage.js jq全屏滚动插件

    fullPage.js和fullPage都能实现全屏滚动,二者区别是:fullPage.js需依赖于JQuery库,而fullPage不需要依赖任何一个js库,可以单独使用. (代码演示效果并且可以下 ...

  8. 前端用户体验优化： JS & CSS 各类效果代码段

    前言 不定时更新 在线预览 https://zzyper.github.io/opti... 在线预览的源码 https://github.com/zzyper/opt... 部分内容仅兼容webki ...

  9. 全屏滚动实现：fullPage.js和fullPage

    fullPage.js和fullPage都能实现全屏滚动,二者差别是:fullPage.js需依赖于JQuery库,而fullPage不须要依赖不论什么一个js库.能够单独使用. 一.fullPage ...

随机推荐

  1. Storm概念学习系列之storm的可靠性

    这个概念,对于理解storm很有必要. 1.worker进程死掉 worker是真实存在的.可以jps查看. 正是因为有了storm的可靠性,所以storm会重新启动一个新的worker进程. 2.s ...

  2. Java 8 (11) 新的日期和时间API

    在Java 1.0中,对日期和时间的支持只能依赖java.util.Date类.这个类只能以毫秒的精度表示时间.这个类还有很多糟糕的问题,比如年份的起始选择是1900年,月份的起始从0开始.这意味着你 ...

  3. linux mint 18.3设置分辨率死机问题的解决方法

    linux mint 18.3由高分辨率设置为低分辨率的时候,会出现死机现象. 解决方法是:使用命令行: xrandr 查询所有支持的分辨率 然后通过 xrandr -s 1920x1080_59.9 ...

  4. sublime 自定义快捷键

    [ { "keys": ["alt+space"], "command": "auto_complete" }, // ...

  5. JavaScript（十二）事件

    Dom事件 1.DOM0级事件 on事件 只能 监听冒泡阶段 切只能绑定一个事件 dom.onclick = function(){}; 2.Dom2级事件 可以绑定多次事件    可以通过设置fla ...

  6. post登录资料备份

    # coding=utf-8 import urllib import hashlib import http.client import http.cookiejar import http.coo ...

  7. 左耳听风 ARTS Week 002

    要求:1.每周至少做一个 leetcode 的算法题 2.阅读并点评至少一篇英文技术文章 3.学习至少一个技术技巧 4.分享一篇有观点和思考的技术文章 1.每周至少做一个 leetcode 的算法题 ...

  8. golang zip 压缩，解压（含目录文件）

    每天学习一点go src. 今天学习了zip包的简单使用,实现了含目录的压缩与解压. 写了两个方法,实现了压缩.解压. package ziptest import ( "archive/z ...

  9. HTML 5 <aside> 标签

    定义和用法 <aside> 标签定义 article 以外的内容.aside 的内容应该与 article 的内容相关. 实例 <p>Me and my family visi ...

  10. ThinkPHP---TP功能类之上传

    [一]概论 (1)上传操作的核心操作:移动临时文件(move_upload_file),在ThinkPHP里封装了上传类Upload.class.php (2)上传类Upload.class.php代 ...