<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. mysqladmin(MySQL管理工具)

    mysqladmin是一个执行管理操作的客户端程序.它可以用来检查服务器的配置和当前状态.创建和删除数据库等. 1.mysqladmin命令的语法: shell > mysqladmin [op ...

  2. 375 Guess Number Higher or Lower II 猜数字大小 II

    我们正在玩一个猜数游戏,游戏规则如下:我从 1 到 n 之间选择一个数字,你来猜我选了哪个数字.每次你猜错了,我都会告诉你,我选的数字比你的大了或者小了.然而,当你猜了数字 x 并且猜错了的时候,你需 ...

  3. 260 Single Number III 数组中除了两个数外，其他的数都出现了两次，找出这两个只出现一次的数

    给定一个整数数组 nums,其中恰好有两个元素只出现一次,其他所有元素均出现两次. 找出只出现一次的那两个元素.示例:给定 nums = [1, 2, 1, 3, 2, 5], 返回 [3, 5].注 ...

  4. 【转】rpm包和源码包安装的区别

    转自:https://blog.csdn.net/junjie_6/article/details/59483785 建议在安装线上的生产服务器软件包时都用源码安装,这是因为源码安装可以自行调整编译参 ...

  5. 1807. [NOIP2014]寻找道路P2296 寻找道路

    题目描述 在有向图G 中,每条边的长度均为1 ,现给定起点和终点,请你在图中找一条从起点到终点的路径,该路径满足以下条件: 1 ．路径上的所有点的出边所指向的点都直接或间接与终点连通. 2 ．在满足条 ...

  6. IDEA 提示Cannot resolve symbol

    将Springboot项目,构建为多个模块的时候,idea的有些类中报错Cannot resolve symbol 解决: 1.File->Invalidate Caches/Restart 清 ...

  7. Win7访问不了WINXP共享文件

    用win xp的机器可以访问,但用win 7的机器无法访问共享文件 提示:您没有权限访问.请与网络管理员联系请求访问权限 网上找了相应的资料 做了如下动作 1. 打开网上邻居→本地连接→属性里,“看是 ...

  8. MFC_2.10选项卡控件的封装

    选项卡控件的封装 1.新建默认MFC项目 2.添加资源Dialog,属性style改child,边框改none,添加类取名CMyDialog1: 同理,CMyDialog2: 3.类向导,添加MFC类 ...

  9. 10Oracle Database 数据表数据查询

    Oracle Database 数据表数据查询 DML 数据操纵语言 - 数据的查看和维护 select / insert /delete /update 基本查询语句 Select [distinc ...

  10. Python Web开发

    参考原文 Python廖雪峰 WSGI接口 WSGI(Web Server Gateway Interface)是一个接口,用来屏蔽底部的细节(如TCP的建立连接,HTTP原始请求和响应格式等).WS ...