CSS3 做輪播圖是一種非常實用的技巧。通過使用 CSS3 的動畫、過渡和變換等特性，我們可以輕松地實現(xiàn)出各種不同的輪播效果。

首先，我們需要使用 HTML 構(gòu)建出輪播圖的結(jié)構(gòu)。通常使用<div>嵌套<img>標(biāo)簽來實現(xiàn)。例如：

<div class="slider">
<img src="img/1.jpg">
<img src="img/2.jpg">
<img src="img/3.jpg">
</div>

接下來，我們需要針對這個結(jié)構(gòu)編寫 CSS 樣式，包括設(shè)置輪播圖容器的寬高、設(shè)置輪播圖中的圖片的位置以及設(shè)置輪播過渡效果等等。例如：

.slider {
width: 800px;
height: 400px;
position: relative;
overflow: hidden;
}
.slider img {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 1s;
}
.slider img:nth-child(1) {
opacity: 1;
}
.slider img.slide {
opacity: 1;
}
.slider img.slide-out {
opacity: 0;
}

上面的 CSS 樣式實現(xiàn)了輪播圖容器的寬高設(shè)置，以及針對輪播圖中的圖片設(shè)置了位置和過渡效果。其中.slider img是設(shè)置輪播圖中的圖片的通用樣式，而.slider img:nth-child(1)則是設(shè)置了第一張圖片默認(rèn)顯示的樣式。接下來，我們就需要通過 JavaScript 代碼來實現(xiàn)輪播效果了。

JavaScript 代碼如下：

const slider = document.querySelector('.slider');
const slides = slider.querySelectorAll('img');
let index = 0;
function slide() {
const currentSlide = slider.querySelector('.slide');
currentSlide.classList.remove('slide');
currentSlide.classList.add('slide-out');
index++;
if (index >= slides.length) {
index = 0;
}
const nextSlide = slides[index];
nextSlide.classList.add('slide');
setTimeout(() =>{
currentSlide.classList.remove('slide-out');
}, 1000);
}
setInterval(() =>{
slide();
}, 3000);

上述 JavaScript 代碼通過設(shè)置計時器和對樣式的操作實現(xiàn)了輪播效果。其中，變量index用于保存當(dāng)前正顯示的圖片的索引，slide()函數(shù)用于實現(xiàn)圖片的切換，setInterval()函數(shù)用于設(shè)置定時器，以便每隔一段時間自動切換圖片。

綜上，通過簡單的 HTML、CSS 和 JavaScript 編寫，我們就可以實現(xiàn)出一個美觀實用的 CSS3 輪播圖。