在網頁設計中，經常會用到圖片輪播功能，這可以使頁面變得更加動態以及增加用戶體驗。而使用CSS可以實現自動循環播放圖片的效果，非常方便。 我們可以通過如下代碼實現：

<style>.carousel {
width: 100%;
height: 500px;
overflow: hidden;
position: relative;
}
.carousel img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: all 1s ease;
}
.carousel img.active {
opacity: 1;
z-index: 10;
}
.carousel img.last-active {
opacity: 0;
z-index: 9;
}
@keyframes carousel {
0% {opacity: 0;}
10% {opacity: 1;}
90% {opacity: 1;}
100% {opacity: 0;}
}
.carousel img:nth-child(1) {
animation: carousel 20s infinite;
}
.carousel img:nth-child(2) {
animation: carousel 20s infinite 5s;
}
.carousel img:nth-child(3) {
animation: carousel 20s infinite 10s;
}
</style><div class="carousel"><img class="active" src="image1.jpg"><img src="image2.jpg"><img src="image3.jpg"></div>

我們可以在`.carousel`類中定義一個寬度和高度，并設置`overflow`屬性為`hidden`，這就意味著，圖片的任何溢出都會被隱藏。我們還設置`position`屬性為`relative`，這是為了確保圖片的相對定位。 在`.carousel img`類中，我們還可以設置圖片的寬度和高度，這與`.carousel`類的寬度和高度相同。我們還要將位置設置為絕對定位，這樣我們就可以確保所有圖片的位置重疊，而不會影響到頁面的布局。我們還給所有圖片設置了初始透明度為0，這樣它們就不會在頁面初始化時立即出現。 我們還定義了兩個具有不同透明度和不同`z-index`的圖片類——`.carousel img.active`和`.carousel img.last-active`。`.carousel img.active`圖片將作為當前輪播的圖片，`.carousel img.last-active`則作為上一個輪播的圖片。 在CSS中，`@keyframes`用于定義一個動畫，在此處我們創建了一個名為`carousel`的動畫，該動畫將使圖片從不透明變為透明。我們還使用了`nth-child`選擇器來為每個圖片添加不同的動畫時間，這樣我們就可以實現多張圖片的循環播放效果。 最后，我們在HTML中包裹了一個`div`元素，并向其中添加了三個`img`元素，它們的路徑是三張不同的圖片。第一個圖片元素被添加了`.active`類，我們已經在CSS中對這個類進行了定義，它將作為當前正在播放的圖片。 使用上述代碼，我們就能實現一個基本的自動循環播放圖片的效果。