CSS3是一個強大的樣式語言，它不僅可以美化網站的外觀，還能實現各種動態效果。其中，輪顯是一種常見的效果，用于在指定時間內依次顯示多張圖片或多個元素。下面我們就來看看如何使用CSS3實現輪顯。

<div class="slider">
<img src="1.jpg"/>
<img src="2.jpg"/>
<img src="3.jpg"/>
</div>
/* CSS */
.slider {
width: 500px;
height: 300px;
overflow: hidden;
position: relative;
}
.slider img {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.slider img:first-child {
opacity: 1;
}
.slider img.active {
opacity: 1;
}

這是一個基礎的輪顯實現，我們首先使用div包裹需要展示的圖片，設置該div的高度和寬度，并將overflow屬性設置為hidden，使得超出div的圖片會被隱藏。接下來，我們使用position屬性將圖片定位到div的左上角，并將其透明度設置為0，使其不可見。我們在第一個img標簽上添加了active類，將其透明度設置為1，作為輪顯的初始狀態。

接著，我們使用CSS3的transition屬性來實現輪顯效果。當某個img標簽的active類被添加時，其透明度會從0變為1，而當active類被移除時，其透明度會從1變為0。這樣，我們就能夠在指定時間內實現圖片的循環展示了。