花意。 2022-04-02 13:57 采纳率: 80%
浏览 28
已结题

怎么把div默认隐藏在浏览器底部之外呀

点击按钮实现：div默认是隐藏并位于浏览器低部之外，点击按钮时，慢慢从上至下移动并渐渐显示出来，当div完全显示时停止移动。
当再次点击按钮时慢慢移动回去。

  • 写回答

3条回答 默认 最新

  • 你好！机器人 2022-04-02 14:09
    关注

    自己再调下

    <!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>

        <style>
              .div1{
        width: 400px;
        height:400px;
        background: #ccc;
        position: relative;
    }
    .div2{
        width: 200px;
        height: 400px;
        background: #0099CC;
        position: absolute;
        left: 0;
        bottom: 0;
    }
    .mask{
        width: 200px;
        height: 400px; /* 高度是变量 */
        position: absolute;
        left: 0;
        top: 0; /* top是变量 */
       
     
    }
    .mask.move{
        animation: animate 5s ease;
         overflow: hidden;
    }
@keyframes animate{
    from {
           height: 0px;
        top : 400px;
    }
    to {
        height: 400px;
        top : 0px;
    }

 

        </style>
    </head>

    <body>
        <div class="div1">
            <div class="mask move">
                <div class="div2">我是div顶部</div>
            </div>
        </div>

    </body>

</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？

问题事件

  • 系统已结题 4月10日
  • 已采纳回答 4月2日
  • 创建了问题 4月2日