使用 CSS 來設置頁面元素的滑動效果可以讓頁面更加生動有趣。下面是一個簡單的例子，演示如何設置一個圖片的滑動效果。 首先，我們需要用 HTML 把圖片插入到網頁中。這里我們使用一個 img 標簽來添加圖片：

下面是一張待滑動的圖片：

<img src="my-image.jpg" alt="My Image">

接下來，我們需要為這個圖片設置樣式來實現滑動效果。我們可以用 transition 屬性，將移動過渡動畫的過渡時間設置為 1 秒，并把圖片的位置設置為左邊界。

為圖片設置 CSS 樣式：

img {
transition: left 1s;
position: absolute;
left: -100%;
}

然后，當鼠標懸停在圖片上時，我們可以用:hover 偽類來激活過渡效果，并把圖片的位置設置為 0。

為圖片添加懸停效果：

img:hover {
left: 0;
}

這是一個最基礎的滑動效果的實現方式。如果你想要定制你自己的滑動效果，你可以使用 transition 的其他屬性，如 transition-timing-function：可以設置過渡動畫的時間函數；transition-duration：可以設置過渡動畫的時間長度等等。 希望這個例子能夠給你一個好的起點，使你可以進一步發掘 CSS 在滑動效果方面的強大功能。