CSS動畫是現(xiàn)在網(wǎng)站制作中最受歡迎的技術之一，它能使網(wǎng)站更加生動、豐富、實用。其中，橫向自動輪播效果是常見的動畫效果之一，如下面的代碼。

/* 設置圖片區(qū)域寬高和溢出隱藏 */
.img-container {
width: 600px;
height: 400px;
overflow: hidden;
}
/* 圖片和圖片容器左浮動 */
.img-list li {
float: left;
}
/* 設置圖片寬度、高度和邊距 */
.img-list img {
width: 600px;
height: 400px;
margin-right: 20px;
}
/* 設置CSS3動畫關鍵幀 */
@keyframes slide {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-620px);
}
}
/* 設置動畫持續(xù)時間、動畫模式和無限循環(huán) */
.img-list {
animation: slide 3s linear infinite;
}

在上面的代碼中，我們首先設置圖片區(qū)域的寬度、高度和溢出隱藏，用來控制圖片的顯示范圍。然后，我們再給圖片和圖片容器設置左浮動，用來排列圖片的位置。

接下來，我們設置圖片的寬度和高度，以及圖片之間的邊距，讓圖片之間有一定的間隔。這樣的話，我們就能夠通過CSS3的動畫來控制圖片容器的移動，從而實現(xiàn)橫向自動輪播的效果。

接下來，我們就開始設置CSS3的動畫，在本例中，我們設置動畫關鍵幀，讓圖片容器在3秒鐘的時間內，從初始位置移動到目標位置，即將所有圖片都向左移動620px，然后再重新從初始位置開始移動。

最后，我們再將動畫的持續(xù)時間、動畫模式和無限循環(huán)設置好之后，就可以看到橫向自動輪播效果的實現(xiàn)了！