在Web開發中，實現圖片自動變換是一個很常見的需求。CSS可以通過一些簡單的動畫技巧來實現這個功能。接下來我們將展示CSS如何實現三張圖片自動變換。
<!DOCTYPE html>
<html>
<head>
<style>
/* 設置容器的寬度和高度 */
.container {
width: 300px;
height: 200px;
overflow: hidden;
}
/* 設置每張圖片的寬度和高度，并隱藏后面兩張圖片 */
.slide {
height: 200px;
width: 300px;
position: relative;
display: none;
}
/* 顯示第一張圖片 */
.slide:first-child {
display: block;
}
/* 設置輪播效果 */
@keyframes slide {
0% {
left: 0;
}
20% {
left: 0;
}
25% {
left: -100%;
}
45% {
left: -100%;
}
50% {
left: -200%;
}
70% {
left: -200%;
}
75% {
left: -300%;
}
95% {
left: -300%;
}
100% {
left: 0;
}
}
/* 給圖片容器添加動畫 */
.container {
animation: slide 12s infinite;
}
</style>
</head>
<body>
<div class="container">
<img src="image1.jpg" class="slide">
<img src="image2.jpg" class="slide">
<img src="image3.jpg" class="slide">
</div>
</body>
</html>首先，我們需要添加一個容器（.container），用來包含所有的圖片。容器設置寬度和高度，并且定義了一個隱藏溢出的屬性（overflow: hidden），這樣我們就能只看到容器內部的圖片。
接著，我們給每一張圖片（.slide）設置寬度和高度，并且定義一個相對定位（position: relative），這樣我們就可以通過left屬性來控制圖片的位置。我們同時也將后兩張圖片隱藏（display: none），只顯示第一張圖片（.slide:first-child）。
在CSS中，我們使用關鍵幀（@keyframes）來創建動畫序列。我們在這里定義了一個名為slide的動畫，包含了多個步驟（0%, 20%, 25%, …, 95%, 100%），這些步驟會控制圖片的left屬性。通過left屬性的變化，我們可以讓圖片移動到容器的不同位置，從而實現自動變換。
最后，我們將這個動畫應用到容器（.container），并且設置了12秒的播放時間（animation: slide 12s infinite）。我們還使用infinite參數來讓動畫無限播放。
上一篇css三張圖片并列