js基础编程-题目27 抽屉动画drawer_js抽屉动画库-优快云博客

这篇博客分享了一段CSS3代码，用于创建一个从下到上展开的抽屉式菜单动画。通过HTML和CSS，实现了点击菜单按钮时，子菜单以平滑的动画效果从底部滑出。博客中包含详细的HTML结构和CSS样式，适合初学者学习和实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

整理下初学时做过的js基础编程题目和大家分享以下，如果大家觉得有用，别忘了点一下赞哦

css3

用css3写一个drawer 抽屉从下到上的动画

视频链接：链接

html部分

<ul class="wrap">
  <li></li>
  <li>
    <span>菜单</span>
    <ul class="menu">
      <li>内容1</li>
      <li>内容2</li>
      <li>内容3</li>
      <li>内容4</li>
    </ul>
  </li>
  <li></li>
  <li></li>
</ul>

css部分

body,
ul {
  margin: 0;
  padding: 0;
}
ul {
  list-style: none;
}
.wrap {
  margin: 50px auto;
  width: 400px;
  height: 50px;
  border: 1px solid;
  background-color: aqua;
  /* overflow: hidden; */
}
.wrap > li {
  position: relative;
  float: left;
  width: 100px;
  height: 100%;
  line-height: 50px;
  text-align: center;
  box-sizing: border-box;
}
.wrap > li::before {
  position: absolute;
  right: 0;
  top: 0;
  display: block;
  content: '';
  height: 100%;
  width: 0;
  border-right: 1px solid;
  background-color: black;
}
.wrap > li:last-child::before {
  border: none;
}
.wrap > li:nth-child(2)::after {
  position: absolute;
  top: 50%;
  margin-top: -15px;
  right: 5px;
  display: block;
  content: '<';
  transform: rotateZ(90deg);
  width: 30px;
  height: 30px;
  line-height: 30px;
}
.wrap > li:hover::after {
  transform: rotateZ(-90deg);
}
.wrap > li:hover .menu {
  transition: background 2s, height 2s;
  background-color: palevioletred;
  height: 200px;
}
.menu {
  display: block;
  position: absolute;
  top: calc(100% + 1px);
  width: 150px;
  overflow: hidden;
  transition: height 2s;
  height: 0;
  
  background-color: pink;
}
.menu > li {
  width:150px;
  height:50px;
  border: 1px solid;
  border-top:0;
  box-sizing: border-box;
}