css三层嵌套滑动门

CSS三层嵌套滑动门是一种经典的Web前端界面设计技巧，它可以让你的页面更加美观和流畅。下面我们来看看如何实现它。

首先，我们需要三个HTML元素：外层容器、内层容器和按钮。它们的HTML代码如下：

<div class="outer">
  <div class="inner"></div>
  <button>按钮</button>
</div> 

外层容器和内层容器都需要设置宽度和高度，并且要添加一个相对定位，以便后面的绝对定位生效。按钮可以根据具体需求设置大小和样式。

.outer{
  position: relative;
  width: 200px;
  height: 100px;
}

.inner{
  position: relative;
  width: 100%;
  height: 100%;
}

button{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
} 

接下来，我们需要对内层容器进行三层嵌套，每层添加一个绝对定位。其中，第一层是左侧滑动门，第二层是中间内容，第三层是右侧滑动门。

<div class="outer">
  <div class="inner">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>    
  </div>
  <button>按钮</button>
</div>

.left{
  position: absolute;
  top: 0;
  left: -50%;
  width: 50%;
  height: 100%;
}

.center{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.right{
  position: absolute;
  top: 0;
  right: -50%;
  width: 50%;
  height: 100%;
} 

最后，我们需要在按钮被点击时，通过改变内层容器的left值，来切换左右滑动门。具体代码如下：

button{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.left{
  position: absolute;
  top: 0;
  left: -50%;
  width: 50%;
  height: 100%;
  background: blue;
  transition: all 0.3s;
}

.center{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: gray;
}

.right{
  position: absolute;
  top: 0;
  right: -50%;
  width: 50%;
  height: 100%;
  background: green;
  transition: all 0.3s;
}

button:hover + .inner .left{
  left: 0;
}

button:hover + .inner .right{
  right: 0;
} 

通过以上代码，我们就成功地实现了CSS三层嵌套滑动门效果。当按钮被鼠标悬停时，左侧滑动门向右移动，右侧滑动门向左移动，以此来切换内容页面。