CSS 3 圖片自動輪播是實現網站幻燈片的一種方法，可以讓網站看起來更加動態和有吸引力。下面我們將介紹如何使用 CSS 3 實現圖片自動輪播。

/* HTML 代碼 */
<div class="slider">
<img src="image1.jpg">
<img src="image2.jpg">
<img src="image3.jpg">
<img src="image4.jpg">
<img src="image5.jpg">
</div>
/* CSS 代碼 */
.slider {
display: flex;
overflow: hidden;
}
.slider img {
width: 100%;
transition: transform 1s ease-in-out;
}
.slider img:first-child {
transform: translateX(0);
}
.slider img:not(:first-child) {
transform: translateX(-100%);
}
/* JavaScript 代碼 */
let images = document.querySelectorAll('.slider img');
let currentIndex = 0;
let interval;
function nextImage() {
images[currentIndex].style.transform = 'translateX(-100%)';
currentIndex = (currentIndex + 1) % images.length;
images[currentIndex].style.transform = 'translateX(0)';
}
interval = setInterval(nextImage, 3000);

首先，我們在 HTML 中創建一個包含圖片的 div 容器，并在其中添加要輪播的圖片。接著，我們使用 CSS 中的 flex 屬性設置容器為彈性盒子，并使用 overflow 屬性指定當圖片超出容器時隱藏。使用 img 元素的 transition 屬性實現圖片滑動的動畫效果。然后，我們使用 JavaScript 中的 setInterval 函數每隔三秒調用一次 nextImage 函數，實現圖片輪播的自動滑動。

在 nextImage 函數中，我們首先把當前圖片向左移動，然后將 currentIndex 設置為下一張圖片的索引，并把下一張圖片向左移動到容器中。

通過這些代碼，我們可以很容易地實現自動輪播圖片的效果。如果需要更復雜的動畫效果，可以在 CSS 中使用更多的屬性進行調整。