[分享]css中怎么添加推拉门

CSS中可以使用伪类和动画来实现推拉门效果，下面我们一步一步来学习如何添加推拉门。首先，我们需要使用HTML创建一个门的容器，并在里面放置门扉和门柄的元素。 接下来，我们需要设置 CSS 样式。...

CSS中可以使用伪类和动画来实现推拉门效果，下面我们一步一步来学习如何添加推拉门。

首先，我们需要使用HTML创建一个门的容器，并在里面放置门扉和门柄的元素。

<div class="door">
  <div class="door-leaf"></div>
  <div class="door-handle"></div>
</div> 

接下来，我们需要设置 CSS 样式。门的容器的宽度和高度必须要设置，否则门扉和门柄元素无法在其中布局。门扉和门柄的样式也需要设置，这样它们才能正确的显示出来。

.door {
  position: relative;
  width: 300px;
  height: 400px;
  background-color: #ddd;
  overflow: hidden;
}

.door-leaf {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background-color: #fff;
  transition: transform 0.5s ease-in-out;
}

.door-handle {
  position: absolute;
  top: 50%;
  right: -50px;
  width: 100px;
  height: 100px;
  background-color: #333;
  border-radius: 50%;
  transform: translateY(-50%);
  transition: right 0.5s ease-in-out;
} 

现在门的样式已经设置好了，下面就可以添加推拉门效果了。我们使用 :hover 伪类来响应鼠标移入门手柄区域，然后调整门扉和门柄的位置和样式，从而实现推拉门的效果。

.door-handle:hover + .door-leaf {
  transform: translateX(50%);
}

.door-handle:hover {
  right: 0;
} 

最后，我们需要在 HTML 中引入 CSS 文件即可查看推拉门效果。这是一个简单的 CSS 推拉门效果，你可以通过调整 CSS 样式来实现不同的推拉门效果。