古早古早以前，HTML 有一個標籤 <marquee> 可以製作跑馬燈，但因為靈活性不夠，且該標籤一直未被納入規範，所以現在算是絕跡了吧 XD

但總是會有類似的跑馬燈需求，所以今天想分享的是，怎麼用 CSS 製作一個垂直滾動的跑馬燈，話不多說，先上範例：

程式碼

首先，我們需要一個包含多個圖片的容器，並給這個容器添加一些樣式，讓它可以顯示出跑馬燈的效果。以下為範例：

<div class="marquee">
  <div class="marquee--group">
    <img src="/login/marquee.png" />
    <img src="/login/marquee.png" />
    <img src="/login/marquee.png" />
  </div>
  <div aria-hidden="true" class="marquee--group">
    <img src="/login/marquee.png" />
    <img src="/login/marquee.png" />
    <img src="/login/marquee.png" />
  </div>
</div>

• .marquee：跑馬燈的容器
• .marquee--group：包含圖片的子容器。

接著，在 CSS 中定義跑馬燈的樣式，包括圖片的排列方式、滾動速度等：

:root {
  --gap: 125px;
  --duration: 5s;
  --scroll-start: 0;
  --scroll-end: calc(-100% - var(--gap));
}

.marquee {
  display: flex;
  overflow: hidden;
  gap: var(--gap);
  flex-direction: column;
}

.marquee--group {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: var(--gap);
  flex-direction: column;
  animation: scroll-y var(--duration) linear infinite;
}

@keyframes scroll-y {
  from {
    transform: translateY(var(--scroll-start));
  }
  to {
    transform: translateY(var(--scroll-end));
  }
}

這邊用到了 CSS 變數，包含

• --gap：圖片之間的距離
• --duration：滾動的時間
• --scroll-start, --scroll-end ：滾動的起點和終點。

程式碼流程

• .marquee 的 display 屬性設置為 flex，並且使用了 overflow: hidden 隱藏了超出容器範圍的內容。
• .marquee--group 則使用了 display: flex，讓圖片可以水平排列，並且使用了 justify-content: space-around 和 align-items: center 居中對齊。
• 使用 animation 屬性設定滾動的動畫效果。

可能會有的問題

aria-hidden="true" 是什麼意思？為什麼在這裡要使用它？

aria-hidden 是 HTML 中的一個屬性，用於指定元素是否對螢幕閱讀器可見。當 aria-hidden 設置為 true 時，該元素將被隱藏，但是可以通過 CSS 或 JavaScript 顯示出來。

在這個例子中，我們使用了 aria-hidden="true" 將第二個 .marquee--group 元素隱藏起來，因為它是用來實現跑馬燈無縫滾動的。如果不隱藏該元素，則會在跑馬燈滾動時出現空白區域，影響美觀和使用體驗。

為什麼要寫 --scroll-end: calc(-100% - var(--gap)); ，他的作用是什麼？會對動畫產生什麼影響？

使用了 calc(-100% - var(--gap)) 計算出一個負值，表示滾動的終點為「最後一張圖片的下方」。

簡單來說，-100% 表示滾動到容器的底部，而 var(--gap) 則表示再向下移動 gap(圖片之間)的距離，以避免圖片重疊或者間隔過大。--scroll-end 的作用是確保跑馬燈在滾動時可以無縫地循環播放。

如果需要調整滾動速度或者間隔距離，只需要修改相應的 CSS 變數即可。

15

發生錯誤。