CSS 圖片自動播放是一種可以讓網頁中的圖片自動輪播的效果。這種效果不僅可以讓頁面更具吸引力，同時也可以讓頁面更加動態和有趣。下面介紹一下如何使用 CSS 實現圖片自動播放。

<div class="slideshow-container">
<div class="mySlides fade">
<img src="images/slide1.jpg">
</div>
<div class="mySlides fade">
<img src="images/slide2.jpg">
</div>
<div class="mySlides fade">
<img src="images/slide3.jpg">
</div>
<a class="prev" onclick="plusSlides(-1)"></a>
<a class="next" onclick="plusSlides(1)"></a>
</div>
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none"; 
}
slideIndex++;
if (slideIndex > slides.length) {
slideIndex = 1;
} 
slides[slideIndex-1].style.display = "block"; 
setTimeout(showSlides, 2000); //圖片輪播時間2秒
}
function plusSlides(n) {
slideIndex += n;
var slides = document.getElementsByClassName("mySlides");
if (slideIndex > slides.length) {
slideIndex = 1;
}
if (slideIndex < 1) {
slideIndex = slides.length;
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none"; 
}
slides[slideIndex-1].style.display = "block"; 
}
</script>

以上代碼中，首先創建了一個輪播容器 div，并將需要輪播的圖片作為 div 中的子元素。然后使用 JavaScript 編寫輪播邏輯，通過設置圖片的 display 樣式來實現輪播效果。最后通過 CSS 設置容器和圖片的樣式來讓輪播效果更美觀。