CSS實現推拉門是一種常見的網頁效果，可以增強網頁的交互性和美觀程度。下面介紹如何使用CSS實現推拉門。

html：
<div class="box">
<div class="door"></div>
</div>
css：
.box {
position: relative;
width: 300px;
height: 150px;
background-color: #eee;
overflow: hidden;
}
.door {
position: absolute;
top: 0;
left: -150px;
width: 150px;
height: 150px;
background-color: #ccc;
transition: all 0.5s ease;
}
.box:hover .door {
left: 0;
}

首先，在HTML中創建一個包含推拉門的外層div，內部再創建一個div作為門扇。然后，通過CSS設置外層div的屬性，包括寬度、高度、背景顏色和溢出隱藏。門扇div通過絕對定位，左偏移-150px，指定寬度、高度和背景顏色。

接著，通過CSS設置門扇div的過渡效果，通過all屬性指定所有屬性過渡，過渡時間為0.5秒，過渡效果為緩動。當鼠標懸停在外層div上時，通過:hover偽類選擇器選中門扇div，并將其左偏移歸零，從而實現門扇推開的效果。

以上就是使用CSS實現推拉門的方法。通過合理地使用CSS的屬性和偽類選擇器，可以實現各種不同的網頁效果，為網站的交互增加更多的樂趣和趣味。