zoukankan      html  css  js  c++  java
  • 奇妙的滚动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; 40px;margin: 0 0 0 150px;overflow: hidden;background-color: #32db64;position: relative;font-size: 12px;}
            #test span{display: inline-block;height: 20px; 40px;text-align: center}
            .box{position: absolute;left: 0;top: 20px;height: 20px; 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>
    

      

  • 相关阅读:
    bottombordertransition – 从中​​间扩展
    P3605 [USACO17JAN]Promotion Counting P
    CF817F MEX Queries
    2021.11.16模拟总结
    动态开点线段树学习笔记
    2021 NOIP 游记
    EntiyFramework :Update model from database引起的两个问题
    .NET Attribute(特性)的作用与用法——几句话解决Attribute使用的困惑
    前端CSS
    前端知识之HTML内容
  • 原文地址:https://www.cnblogs.com/jiebba/p/7651670.html
Copyright © 2011-2022 走看看