CSS輪換圖是一種經常被使用的網頁設計元素，可以讓頁面變得更加生動和有趣。然而，有時候我們需要讓輪換圖循環播放，這樣就可以不間斷地展示多張圖片。接下來，我們將介紹如何使用CSS來實現輪換圖的循環播放。

/* 定義輪換圖的父元素 */
.slideshow {
position: relative;
width: 100%;
height: 400px;
}
/* 定義每張圖片的樣式 */
.slideshow img {
position: absolute;
left: 0;
top: 0;
opacity: 0;
transition: opacity 1s ease-in-out;
}
/* 定義第一張圖片的樣式 */
.slideshow img:first-child {
opacity: 1;
}
/* 定義輪換圖動畫 */
@keyframes slideshow {
0% {
opacity: 0;
}
20% {
opacity: 1;
}
33% {
opacity: 1;
}
53% {
opacity: 0;
}
100% {
opacity: 0;
}
}
/* 定義輪換圖動畫的執行順序和持續時間 */
.slideshow img:first-child {
animation: slideshow 5s infinite;
}
.slideshow img:nth-child(2) {
animation-delay: 5s;
animation: slideshow 5s infinite;
}
.slideshow img:nth-child(3) {
animation-delay: 10s;
animation: slideshow 5s infinite;
}
.slideshow img:nth-child(4) {
animation-delay: 15s;
animation: slideshow 5s infinite;
}

以上代碼的實現原理是利用CSS3的動畫特性，通過設定不同的opacity值，實現圖片的漸變效果。我們將第一張圖片的opacity設為1，其余圖片的opacity都設為0，然后通過定時器和keyframes動畫，控制圖片的透明度及切換效果。

在上述代碼中，我們設定了四張圖片，并通過nth-child選擇器及animation-delay屬性，分別控制不同圖片的展示時間和動畫。

最后需要注意的是，為了確保輪換圖能夠無限循環播放，我們需要將CSS動畫的重復次數設置為infinite。