CSS 實現簡易圖片輪播相冊：純 CSS 動畫與關鍵幀

需求分析

單 HTML 文件 + CSS 實現：圖片自動輪播、無限循環、支持文字疊加。無 JavaScript 依賴。

核心原理：CSS Animation + Transform

• 容器 overflow: hidden 裁切。
• 內部軌道 display: flex 排列所有圖片 (含複製的首尾副本實現無縫循環)。
• @keyframes 驅動 transform: translateX() 移動軌道。
• animation: slide 20s linear infinite 實現自動、無限、勻速播放。

完整代碼示例

HTML 結構

<div class="carousel">
  <div class="track">
    <!-- 複製最後一張到開頭，實現無縫銜接 -->
    <div class="slide"><img src="img5.jpg"><div class="caption">第 5 張</div></div>
    <div class="slide"><img src="img1.jpg"><div class="caption">第 1 張</div></div>
    <div class="slide"><img src="img2.jpg"><div class="caption">第 2 張</div></div>
    <div class="slide"><img src="img3.jpg"><div class="caption">第 3 張</div></div>
    <div class="slide"><img src="img4.jpg"><div class="caption">第 4 張</div></div>
    <div class="slide"><img src="img5.jpg"><div class="caption">第 5 張</div></div>
    <!-- 複製第一張到結尾 -->
    <div class="slide"><img src="img1.jpg"><div class="caption">第 1 張</div></div>
  </div>
</div>

CSS 樣式

.carousel {
  width: 600px; height: 300px;
  overflow: hidden;
  position: relative;
  border: 1px solid #ddd;
}

.track {
  display: flex;
  width: 700%; /* 7 張圖 (5原始 + 2副本) * 100% */
  height: 100%;
  animation: slide 20s linear infinite;
  /* 暫停懸停 */
  /* animation-play-state: running; */
}

.slide {
  flex: 0 0 14.2857%; /* 100% / 7 */
  height: 100%;
  position: relative;
}

.slide img {
  width: 100%; height: 100%; object-fit: cover;
}

.caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: rgba(0,0,0,0.6);
  color: white;
  padding: 10px;
  text-align: center;
  font-size: 14px;
}

/* 關鍵幀：移動軌道 */
@keyframes slide {
  0%   { transform: translateX(-14.2857%); } /* 從第 2 張(真正的第一張)開始 */
  100% { transform: translateX(-85.7143%); } /* 移動到倒數第 2 張結束 */
}

/* 懸停暫停 */
.carousel:hover .track {
  animation-play-state: paused;
}

關鍵點解析

1. 無縫循環技巧： 複製首尾各一張，動畫從「副本尾→真實頭」跳轉到「真實尾→副本頭」瞬間視覺無跳動。
2. 百分比計算： translateX 百分比相對軌道寬度。7 張圖，每張佔 1/7 ≈ 14.2857%。
3. 文字疊加： .caption 絕對定位於 .slide 底部，半透明背景保證可讀性。
4. 響應式： 容器寬度設為 100% 或 max-width 即可適配移動端。

擴展：添加導航點 (需少量 JS 或 :target Hack)

純 CSS 實現點擊切換較複雜 (利用 :target 或 input:checked Hack)，建議專案中引入輕量 JS (如 Swiper) 或編寫簡單的 IntersectionObserver 邏輯控制 animation-play-state 與 transform 實現手動控制。