圖片自動輪播是網站設計中常用的功能之一，通常需要使用CSS來實現。下面就讓我們來看一下如何使用CSS實現圖片自動輪播的效果。

/*設置圖片輪播容器的寬度和高度*/
.carousel {
width: 100%;
height: 500px;
overflow: hidden;
position: relative;
}
/*設置圖片寬度和高度*/
.carousel img {
width: 100%;
height: auto;
}
/*為每張圖片設置絕對定位*/
.carousel img:nth-child(1) {
position: absolute;
top: 0;
left: 0;
opacity: 1;
}
.carousel img:nth-child(2) {
position: absolute;
top: 0;
left: 0;
opacity: 0;
animation: slide 6s infinite;
}
.carousel img:nth-child(3) {
position: absolute;
top: 0;
left: 0;
opacity: 0;
animation: slide 6s infinite;
}
/*設置圖片輪播動畫*/
@keyframes slide {
25% {
opacity: 1;
}
30% {
opacity: 0;
}
55% {
opacity: 0;
}
60% {
opacity: 1;
}
}

以上代碼實現的效果是，圖片容器.carousel的高度為500px，圖片寬度為100%，每張圖片的寬度會隨著屏幕的大小改變而自適應，第一張圖片的opacity為1，其他兩張圖片的opacity為0，第二張和第三張圖片會無限循環輪播，輪播時間為6秒。