CSS擁有一個很有用的功能，那就是可以利用它來輪流展示多張圖片。通過簡單的CSS代碼，就可以讓多張圖片自動切換，不需要手動進行切換。

/* 定義一些基本樣式 */
.slideshow {
position: relative;
width: 100%;
height: 100%;
}
.slideshow img {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 1s ease-in-out;
width: 100%;
height: 100%;
}
.slideshow img:first-child {
opacity: 1;
}
/* 定義動態(tài)效果 */
@keyframes slideshow {
0% {
opacity: 0;
}
20% {
opacity: 1;
}
25% {
opacity: 0;
}
100% {
opacity: 0;
}
}
/* 設(shè)置每張圖片的動態(tài)時長和延遲時間 */
.slideshow img:nth-child(1) {
animation: slideshow 16s linear infinite;
}
.slideshow img:nth-child(2) {
animation: slideshow 16s linear 4s infinite;
}
.slideshow img:nth-child(3) {
animation: slideshow 16s linear 8s infinite;
}

在HTML代碼中，只需要創(chuàng)建一個div元素，然后在里面放置多張圖片即可。

這樣就可以輕松地實現(xiàn)多張圖片自動切換的效果了。上面的CSS代碼中，使用了CSS的動畫特性，來實現(xiàn)圖片之間的切換。其中，animation定義了動態(tài)效果，slideshow是動態(tài)效果的名稱，16s是動態(tài)效果的時長，linear是時間曲線，infinite表示動態(tài)效果是無限循環(huán)的。nth-child選擇器用來選擇子元素，通過設(shè)置不同的動態(tài)時長和延遲時間，讓每張圖片在不同的時間點進行切換。