CSS中如何添加推拉門效果

在CSS中，我們可以通過使用transform屬性來(lái)添加推拉門效果，以下是一個(gè)簡(jiǎn)單的示例：

HTML結(jié)構(gòu)：

<div class="slider">
  <div class="door"></div>
  <div class="door"></div>
  <div class="content">
    <p>這里是內(nèi)容區(qū)域</p>
  </div>
</div>

CSS樣式：

.slider {
  position: relative;
  width: 300px;
  height: 200px;
  overflow: hidden;
}
.door {
  position: absolute;
  width: 50px;
  height: 200px;
  background: #333;
}
.door:first-child {
  left: 0;
}
.door:last-child {
  right: 0;
}
.content {
  position: absolute;
  width: 200px;
  height: 200px;
  background: #fff;
  transform: translateX(150px);
  transition: transform 0.3s ease-in-out;
}

JavaScript代碼：

var slider = document.querySelector('.slider');
var content = document.querySelector('.content');
var doors = document.querySelectorAll('.door');
var doorWidth = doors[0].offsetWidth;
var contentWidth = content.offsetWidth;
var translateX = contentWidth - doorWidth;
var translateY = 0;
var duration = 300; // 動(dòng)畫持續(xù)時(shí)間，單位ms
var easingFunction = 'ease-in-out'; // 動(dòng)畫緩動(dòng)函數(shù)，可選值'linear', 'ease-in', 'ease-out', 'ease-in-out'等，默認(rèn)'linear'。