花意。 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日

悬赏问题

  • ¥15 微信小程序协议怎么写
  • ¥15 c语言怎么用printf（“\b \b”）与getch（）实现黑框里写入与删除？
  • ¥20 怎么用dlib库的算法识别小麦病虫害
  • ¥15 华为ensp模拟器中S5700交换机在配置过程中老是反复重启
  • ¥15 java写代码遇到问题，求帮助
  • ¥15 uniapp uview http 如何实现统一的请求异常信息提示？
  • ¥15 有了解d3和topogram.js库的吗？有偿请教
  • ¥100 任意维数的K均值聚类
  • ¥15 stamps做sbas-insar，时序沉降图怎么画
  • ¥15 买了个传感器，根据商家发的代码和步骤使用但是代码报错了不会改，有没有人可以看看