使用css实现打开抽屉效果（css过渡动画）

一个打工仔的笔记2025-11-15 16:16

方法一、使用高度方式，高度从0到展示进行过渡

html：

cpp 复制代码

 <div class="container">
       <div class="menu">菜单</div>
       <div class="box">
       </div>
    </div>

css:

cpp 复制代码

  .box {
        width: 400px;
        height: 0;
        background-color: red;
        transition: all 1s ease;
      }
      .menu{
        height: 50px;
      }
      .menu:hover ~ .box{
        height: 300px;
      }

方法二、使用定位方法，相对较麻烦

HTML代码：

cpp 复制代码

 <div class="container">
       <div class="menu">菜单</div>
       <div class="box">
          <div class="drawer"></div>
       </div>
    </div>

css

cpp 复制代码

.container{
        background-color: #fff;
      }
      .box{
        position: relative;
        overflow: hidden;
      }
       .drawer {
        width: 400px;
        height: 300px;
        background-color: red;
        overflow: hidden;
        position: absolute;
        top: -300px;
        transition: all 1s ease;
      }
      .menu{
        height: 50px;
      }
      .menu:hover ~ .box{ /* 悬浮时，在此处绘制容器宽高，可以避免在抽屉未打开时，占用高度 */
        width: 400px;
        height: 300px;
      }
      .menu:hover ~ .box .drawer{
        top: 0px;
      }