javascript - 用js实现页面上的内容先下滑再升起 -PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

javascript - 用js实现页面上的内容先下滑再升起

ringa_lee 2017-04-11 09:00:45

[JavaScript讨论组]

244

1.用js实现页面上的内容先下滑再升起
2.类似主站绿色条幅的升起下降的过程

3.代码部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .main{
            position: relative;
            width: 600px;
            height: 200px;
            background: #aaa;
        }
        .mask{
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 50px;
            background: #D9EDF7;
        }
    </style>
    <script>
        window.onload = function  (){

        };
    </script>
</head>
<body>
    <p class="main">
        <p class="mask">
            
        </p>
    </p>
</body>
</html>

4.我在写这种遮罩的时候都是用的绝对定位所以不知道怎样隐藏该部分内容