CSS可以實現很多特效，其中一種是左右劃出的顯示效果。下面我們來學習一下如何通過CSS實現這個效果。

.slide {
position: relative;
overflow: hidden;
}
.slide-item {
position: absolute;
width: 100%;
height: 100%;
top: 0;
transition: transform 0.6s ease;
}
.slide-item.left {
transform: translateX(-100%);
}
.slide-item.right {
transform: translateX(100%);
}
.slide-item.active {
transform: translateX(0);
}

首先，我們需要在HTML中設置一個包含所有滑動元素的父級容器，并在CSS中設置其相對定位及溢出隱藏屬性。接著，我們需要給每個滑動元素設置絕對定位，寬高都為100%，并使用transition屬性設置動畫過渡效果。

然后，我們可以在CSS中設置三個類名來表示左邊、右邊和活動狀態的滑動元素。分別使用transform: translateX()屬性將左、右元素通過移動操作推出屏幕。將活動狀態屬性設置為transform: translateX(0)，可以將滑動元素移回屏幕內。

最后，在JS中我們可以通過設置當前活動元素的類名來播放動畫。在動畫切換時，我們可以將當前活動元素的類名切換為左、右元素類名，然后再將移入的元素的類名切換為活動狀態類名即可。

通過這種方式，我們就可以輕松實現左右劃出的顯示效果了。希望這篇文章對您有所幫助！