CSS是我們開發網站時常用的一種技術，而對于圖片顯示，我們常常需要將多張圖片循環輪流展示，這時我們就可以使用CSS來實現這個效果。

/*定義我們需要循環移動的圖片*/
.image-loop {
position: relative; /*需要開啟定位*/
width: 300px;
height: 200px;
overflow: hidden; /*隱藏超出部分*/
}
.image-loop img {
position: absolute; /*絕對定位*/
width: 100%;
height: 100%;
opacity: 0; /*首先將所有圖片隱藏*/
transition: opacity 1s ease; /*添加漸變動畫*/
}
/*定義我們需要展示的圖片*/
.image-loop img:nth-child(1),
.image-loop img:nth-child(2),
.image-loop img:nth-child(3) {
opacity: 1; /*將第1、2、3張圖片設置為展示狀態*/
}
/*添加CSS動畫*/
@keyframes loop {
0% {
transform: translateX(0);
}
25% {
transform: translateX(-100%);
}
50% {
transform: translateX(-100%);
}
75% {
transform: translateX(-200%);
}
100% {
transform: translateX(-200%);
}
}
/*設置動畫執行時長和循環次數*/
.image-loop img {
animation: loop 9s linear infinite;
}

代碼解析：

在HTML中，我們先將需要循環移動的圖片都放在一個div中，這里我們給div添加類名為.image-loop，然后通過img標簽來定義我們需要展示的圖片，并通過nth-child來設置需要展示的圖片為第1、2、3張。

<div class="image-loop"><img src="image_1.jpg" alt="image 1" /><img src="image_2.jpg" alt="image 2" /><img src="image_3.jpg" alt="image 3" /><img src="image_4.jpg" alt="image 4" /><img src="image_5.jpg" alt="image 5" /></div>

在CSS中，我們將.image-loop設置為相對位置，并設置寬度和高度，同時將overflow設置為hidden，以隱藏超出部分。然后我們將圖片設置為絕對位置，并將所有圖片的opacity值設置為0，即隱藏所有圖片。接著，我們通過animation來添加一個動畫，動畫通過keyframes定義了圖片移動的過程，包括初始位置和終止位置以及移動過程中的狀態，最后我們通過animation屬性將這個動畫綁定到圖片上，并設置其執行時長和循環次數。

.image-loop {
position: relative;
width: 300px;
height: 200px;
overflow: hidden;
}
.image-loop img {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1s ease;
}
.image-loop img:nth-child(1),
.image-loop img:nth-child(2),
.image-loop img:nth-child(3) {
opacity: 1;
}
@keyframes loop {
0% {
transform: translateX(0);
}
25% {
transform: translateX(-100%);
}
50% {
transform: translateX(-100%);
}
75% {
transform: translateX(-200%);
}
100% {
transform: translateX(-200%);
}
}
.image-loop img {
animation: loop 9s linear infinite;
}

通過以上代碼，我們可以輕松的實現圖片的循環輪播，讓網站顯得更炫酷，更有吸引力。