[分享]css3抽屉动画从下往上

CSS3抽屉动画已经成为现代Web设计的一个趋势，它可以为网页添加更多的交互特效和视觉效果。本文将介绍如何使用CSS3实现一个从下往上的抽屉动画。/ HTML代码 / 抽屉标题 关闭 抽屉内容...

CSS3抽屉动画已经成为现代Web设计的一个趋势，它可以为网页添加更多的交互特效和视觉效果。本文将介绍如何使用CSS3实现一个从下往上的抽屉动画。

/* HTML代码 */
<div class="drawer">
  <div class="drawer-header">
    <h1>抽屉标题</h1>
    <button id="drawer-close-btn">关闭</button>
  </div>
  <div class="drawer-body">
    <p>抽屉内容</p>
  </div>
</div>

/* CSS样式 */
.drawer {
  position: fixed;
  bottom: -300px; /* 抽屉的初始位置在底部，偏移量为抽屉高度的负值 */
  left: 0;
  width: 100%;
  height: 300px;
  background-color: #FFF;
  transition: bottom 0.5s ease-in-out; /* 使用过渡效果实现动画 */
}
.drawer.opened {
  bottom: 0; /* 抽屉展开时bottom为0，即抽屉高度的正值 */
}
.drawer-header {
  height: 50px;
  line-height: 50px;
  padding: 0 20px;
  background-color: #F5F5F5;
  border-bottom: 1px solid #CCC;
}
.drawer-header h1 {
  font-size: 18px;
  font-weight: bold;
  margin: 0;
  float: left;
}
.drawer-header #drawer-close-btn {
  float: right;
  background-color: #F5F5F5;
  border: none;
  cursor: pointer;
}
.drawer-body {
  padding: 20px;
}

/* JS代码 */
var drawer = document.querySelector('.drawer')
var drawerCloseBtn = document.querySelector('#drawer-close-btn')

drawerCloseBtn.addEventListener('click', function () {
  drawer.classList.remove('opened') // 点击关闭按钮，抽屉收起
})

window.addEventListener('scroll', function () {
  var scrollTop = window.pageYOffset || document.documentElement.scrollTop
  if (scrollTop > 500) { // 当页面滚动到一定位置时，抽屉自动展开
    drawer.classList.add('opened')
  }
}) 

通过以上代码，我们成功实现了一个从下往上的抽屉动画效果。具体实现方法是将抽屉的初始位置放在底部，根据需要展开时修改bottom属性来实现动画，同时为抽屉的关闭按钮和自动展开事件添加事件监听。使用CSS3动画，我们可以为网页添加更多交互效果，提升用户体验。