在網頁設計中，圖片輪番是一種常見的交互式效果，它可以使頁面更加生動有趣。在 CSS 中，我們可以使用 animation 和 keyframes 屬性來實現圖片輪番效果。

首先，我們需要設置一個含有多張圖片的 div，然后在 CSS 文件中設置其樣式：

.slider {
width: 500px;
height: 300px;
overflow: hidden;
position: relative;
}
.slider img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
animation: slide 8s infinite;
}

在上面的代碼中，我們設置了一個 .slider div，同時設置其包含的圖片樣式。其中，opacity 屬性為 0 表示圖片不可見，而 animation 屬性則指定了圖片在頁面上的滑動效果，通過 slide 關鍵幀定義了圖片的運動方式。接下來，我們需要定義關鍵幀：

@keyframes slide {
0% {
opacity: 0;
transform: translateX(0%);
}
5% {
opacity: 1;
}
25% {
opacity: 1;
}
30% {
opacity: 0;
transform: translateX(-100%);
}
95% {
opacity: 0;
transform: translateX(-100%);
}
100% {
opacity: 1;
transform: translateX(0%);
}
}

在上述代碼中，我們定義了 6 個關鍵幀，分別表示圖片的運動狀態。通過 transform 屬性，我們可以實現圖片從右往左的滑動效果。最后，我們只需要在 HTML 文件中引入 CSS 文件，并設置圖片的路徑即可：

<div class="slider">
<img src="image1.jpg">
<img src="image2.jpg">
<img src="image3.jpg">
</div>

以上便是使用 CSS 實現圖片輪番的步驟，通過設置 animation 和 keyframes 屬性，我們可以輕松地實現多張圖片的展示和滑動效果。