花意。 2022-04-02 13:57 采纳率: 88.9%
浏览 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日

悬赏问题

  • ¥100 嵌入式系统基于PIC16F882和热敏电阻的数字温度计
  • ¥20 BAPI_PR_CHANGE how to add account assignment information for service line
  • ¥500 火焰左右视图、视差（基于双目相机）
  • ¥100 set_link_state
  • ¥15 虚幻5 UE美术毛发渲染
  • ¥15 CVRP 图论 物流运输优化
  • ¥15 Tableau online 嵌入ppt失败
  • ¥100 支付宝网页转账系统不识别账号
  • ¥15 基于单片机的靶位控制系统
  • ¥15 真我手机蓝牙传输进度消息被关闭了，怎么打开？(关键词-消息通知)