推拉門是網頁設計中比較常見的效果，利用CSS可以實現推拉門的動畫效果。本文將為大家介紹CSS中如何添加推拉門效果。

/*設置推拉門容器*/
.container {
position: relative;
width: 800px;
height: 500px;
overflow: hidden;
}
/*設置門的樣式*/
.door {
position: absolute;
top: 0;
width: 50%;
height: 100%;
background: #fff;
transition: all 0.5s ease-in-out;
}
/*設置左門的樣式*/
.door.left {
left: 0;
transform: translateX(0%);
}
/*設置右門的樣式*/
.door.right {
right: 0;
transform: translateX(0%);
}
/*設置門打開后的樣式*/
.container.open .door.left {
transform: translateX(-100%);
}
.container.open .door.right {
transform: translateX(100%);
}

首先，我們需要將推拉門容器設置為相對定位，并設置寬度、高度和溢出隱藏。接著，我們需要設置門的樣式，并使用CSS3的過渡屬性實現門的平滑移動效果。

門分為左門和右門，我們需要分別對它們進行樣式設置。對于左門，我們需要將它向左移動50%以占據推拉門容器的一半寬度，并將它的transform屬性設置為translateX(0%)。對于右門，我們需要將它的位置設置為容器的右側，同樣需要將它的transform屬性設置為translateX(0%)。

當門打開時，我們需要將左門向左移動100%，右門向右移動100%，實現門打開的效果。因此，我們需要添加.container.open的類，并在其中對左門和右門的樣式進行修改。

至此，我們已經完成了CSS中推拉門的設置，通過添加適當的HTML元素和JavaScript代碼，我們可以實現推拉門的完整效果。