CSS圖片輪播是設計網站界面時經常用到的交互效果之一，它利用CSS3的動畫屬性和圖片絕對定位屬性來實現圖片之間的切換和動畫效果。下面給出一個簡單的CSS圖片輪播的代碼示例。

<div class="slideshow">
<img src="image1.jpg">
<img src="image2.jpg">
<img src="image3.jpg">
</div>
/* CSS代碼 */
.slideshow {
position: relative;
width: 100%;
height: 400px;
overflow: hidden;
}
.slideshow img {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: all 1s;
width: 100%;
height: 400px;
}
.slideshow img:first-child {
opacity: 1;
}
.slideshow img.active {
opacity: 1;
}

上面的代碼中，我們首先創建一個容器div來包含所有要輪播的圖片。我們給容器設置了relative的定位，以便子元素的絕對定位相對于該容器進行。容器的寬度和高度都設置為100%，并給容器設置了overflow:hidden屬性來隱藏所有超出容器范圍的圖片。

下面是輪播圖片的CSS樣式代碼。我們為所有圖片設置了絕對定位，并把它們的位置調整到容器的左上角。同時，我們把所有圖片的不透明度opacity設置為0，以便在輪播時產生漸變效果。transition屬性則是設置動畫過渡的時間。我們使用:first-child選擇器為第一張圖片設置不透明度為1。active類的圖片則會在JavaScript中被激活，并且它的不透明度也會變成1，從而實現透明度的過渡效果。

總之，CSS圖片輪播是一種可以幫助我們豐富網站界面交互效果的方便而實用的技術。