在網頁設計中，圖片的滑動效果可以加強頁面的視覺呈現，提高用戶的體驗感。下面我們來介紹一下如何使用 CSS 讓圖片滑動。

<style>
.slide {
position: relative;
overflow: hidden;
}
.slide img {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.slide img.active {
opacity: 1;
}
</style>
<div class="slide">
<img src="image1.jpg" class="active">
<img src="image2.jpg">
<img src="image3.jpg">
</div>

上述代碼中，首先將 .slide 容器的 overflow 屬性設置為 hidden，這樣可以隱藏容器邊界之外的內容。然后通過絕對定位將圖片疊在一起，opacity 屬性設置為 0，讓圖片不可見。

通過給其中一個圖片添加 active 類，設置 opacity 屬性為 1，可以讓該圖片在滑動過程中顯示出來。當然，可以通過 JavaScript 動態修改 active 類來實現圖片切換。

接下來，給圖片設置過渡效果 transition，讓圖片的透明度在 0.5 秒內漸變過渡，實現圖片滑動的效果。

在實際使用中，可以根據需要修改 CSS 屬性，實現不同的圖片滑動效果。