在網(wǎng)頁設(shè)計中，滑動效果是非常常見的。通過 CSS，我們可以輕松地實現(xiàn)網(wǎng)頁中的滑動效果。下面是一個簡單的 CSS 代碼，可以實現(xiàn)一個圖片的左右滑動效果：

.slide {
overflow: hidden;
}
.slide img {
width: 100%;
height: auto;
transition: transform .3s ease-out;
}
.slide:hover img {
transform: translateX(-20%);
}

首先，我們將外部容器的 overflow 屬性設(shè)置為 hidden。這樣，當(dāng)圖片超出容器的寬度時，就會被隱藏起來。接下來，我們設(shè)定圖片的寬度為 100%，并設(shè)置高度自適應(yīng)。此外，我們還設(shè)置了一個過渡效果，使得滑動更加平滑。

最后，我們使用 :hover 偽類來觸發(fā)滑動效果。當(dāng)鼠標懸停在圖片上時，我們使用 transform 屬性將圖片水平移動 20%。這樣就能產(chǎn)生一個類似于左右滑動的效果。

除了左右滑動，我們還可以實現(xiàn)上下滑動、漸變滑動、輪播圖等多種滑動效果。不同的滑動效果需要使用不同的 CSS 屬性和技巧。如果您想了解更多有關(guān) CSS 滑動效果的知識，建議多進行實踐和嘗試。