輪播圖是網站頁面中最常見的元素之一，它可以讓用戶在不用轉到其他頁面的情況下，瀏覽不同的圖片或信息。今天我們來學習如何通過CSS實現輪播圖的淡入淡出效果。

首先，我們需要定義一個包含多張圖片的容器，然后將每張圖片都設置為絕對定位，并將它們的z-index設為0。我們需要將其中一張圖片的z-index設為1，以便在一開始就顯示出來。

.carousel {
position: relative;
height: 500px;
width: 100%;
}
.carousel img {
position: absolute;
z-index: 0;
}
.carousel img:first-child {
z-index: 1;
}

接下來，我們將使用CSS關鍵幀來創建淡入淡出的效果。我們將使用@keyframes創建兩個動畫，一個用于淡入圖片，另一個用于淡出圖片。我們將淡入動畫命名為fadeIn，淡出動畫命名為fadeOut。

@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}

現在我們已經準備好了，下一步就是將這兩個動畫應用到圖片上。我們將在父元素上設置一個變量，用于控制輪播的速度。

.carousel {
--animation-time: 5s;
}

接著，我們將在圖片上應用fadeIn和fadeOut動畫，并將animation-duration屬性設置為我們的變量。

.carousel img {
animation-duration: var(--animation-time);
animation-timing-function: linear;
}
.carousel img.fadeIn {
animation-name: fadeIn;
}
.carousel img.fadeOut {
animation-name: fadeOut;
animation-fill-mode: forwards;
}

現在我們已經完成了輪播圖淡入淡出效果的CSS代碼。我們可以通過改變--animation-time變量的值來調整圖片輪播的速度。