CSS輪播圖是網站設計中很常用的功能，它可以使網站更加動感和吸引人。下面我們來介紹一下如何使用CSS來實現輪播圖。

HTML：
<div class="carousel">
<img src="img1.jpg" class="active">
<img src="img2.jpg">
<img src="img3.jpg">
</div>
CSS：
.carousel {
position: relative;
width: 600px;
height: 400px;
}
.carousel img {
position: absolute;
left: 0;
top: 0;
opacity: 0;
transition: opacity .5s ease-in-out;
}
.carousel img.active {
opacity: 1;
}
JavaScript：
var carousel = document.querySelector('.carousel');
var images = carousel.getElementsByTagName('img');
var currentIndex = 0;
function changeImage() {
images[currentIndex].classList.remove('active');
currentIndex = (currentIndex + 1) % images.length;
images[currentIndex].classList.add('active');
}
setInterval(changeImage, 3000);

以上是實現CSS輪播圖的簡單代碼示例。

首先我們在HTML中創建一個DIV元素，設置寬度和高度，然后在其中添加需要輪播的圖片，其中第一張圖片需要給一個class為“active”，用來標示當前顯示的圖片。

在CSS中，將DIV設置為相對定位，圖片設置為絕對定位，并且設置不透明度為0，添加過渡效果。給當前顯示的圖片添加一個額外的class，用來標示它是當前顯示的圖片。

在JavaScript中，首先獲取到輪播圖的DIV元素和其中的所有圖片元素。然后定義一個currentIndex變量，用來標示當前顯示的圖片的索引。定義changeImage函數，用來切換圖片。首先將當前顯示的圖片的class移除，然后更新currentIndex的值，使其指向下一張圖片。然后給新的當前圖片添加class。最后使用setInterval函數來定時調用changeImage函數，實現了輪播圖效果。