在網(wǎng)頁設(shè)計中，圖片的滑動效果可以加強頁面的視覺呈現(xiàn)，提高用戶的體驗感。下面我們來介紹一下如何使用 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 屬性設(shè)置為 hidden，這樣可以隱藏容器邊界之外的內(nèi)容。然后通過絕對定位將圖片疊在一起，opacity 屬性設(shè)置為 0，讓圖片不可見。

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

接下來，給圖片設(shè)置過渡效果 transition，讓圖片的透明度在 0.5 秒內(nèi)漸變過渡，實現(xiàn)圖片滑動的效果。

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