純 CSS 製作跑馬燈效果

這篇教學會單純使用 CSS 製作文字跑馬燈效果，不僅會介紹「縮排」和「平移」兩種製作方式，還會說明例如裁切、轉換、縮排、動畫等互相搭配的控制技巧。

快速導覽：

• 只顯示部分文字內容
• 運用縮排，製作跑馬燈效果
• 運用平移轉換，製作跑馬燈效果

只顯示部分文字內容

如果要讓某個元素中「只限是部分文字內容」，需要使用 overflow 隱藏超過範圍的內容，並搭配 white-space 強制文字不換行，詳細說明如下方範例：

參考：內容溢出與裁切 overflow、white-space 處理空白

線上展示：https://codepen.io/oxxo/pen/WbeZvXa

<!-- HTML 程式碼 -->
<div>
  <h3>hello world! I am oxxo! How are you? I'm fine thank you!</h3>
</div>

<!-- CSS 程式碼 -->
<style>
  div {
    width: 300px;
    overflow: hidden;        /* 超過範圍就隱藏 */
    border: 1px solid #000;
    white-space: nowrap;     /* 內容強制不換行 */
    font-size: 30px;
    box-shadow: inset 0 0 10px #0009;  /* 內陰影 */
  }
  h3 {
    margin: 5px;
  }
</style>

運用縮排，製作跑馬燈效果

縮排 text-indent 可以控制第一行文字的左右位移，如果使用「百分比」為單位，縮排的數值就會是「元素寬度的百分比」，透過縮排的方式，搭配 animation 製作動畫，就能產生跑馬燈效果，下方範例使用 max-content 屬性值取得內容最大寬度，縮排使用「-101%」避免露出少部分文字，並搭配 CSS 變數取得父元素寬度，當移動到最左邊之後，根據父元素寬度設定縮排移動到最右邊。

參考：text-indent 縮排、動畫 animation、max-content、CSS 變數

線上展示：https://codepen.io/oxxo/pen/jENGPaX

<!-- HTML 程式碼 -->
<div>
  <h3>hello world! I am oxxo! How are you? I'm fine thank you!</h3>
</div>

<!-- CSS 程式碼 -->
<style>
  div {
    --w: 300px;         /* 設定變數，讓動畫可以使用 */
    width: var(--w);
    overflow: hidden;
    border: 1px solid #000;
    white-space: nowrap;
    font-size: 30px;
    box-shadow: inset 0 0 10px #0009;
  }
  h3 {
    text-indent: var(--w);  /* 縮排放到右邊 */
    width: max-content;     /* 寬度等於內容最大寬度 */
    margin: 5px;
    animation: 10s go linear infinite;  /* 製作動畫 */
  }
  @keyframes go {
    0% {text-indent: var(--w);}  /* 起始位置為最右邊 */
    90% {text-indent: -101%;}    /* 90% 時移動到最左邊，使用 -101% 避免稍微露出文字 */
    100% {text-indent: -101%;}   /* 100% 時保持原本位置，產生間隔時間差 */
  }
</style>

運用平移轉換，製作跑馬燈效果

使用 transform 的 translateX 可以控制元素在 X 軸的的左右位移，如果使用「百分比」為單位，縮排的數值就會是「元素寬度的百分比」，透過平移轉換的方式，搭配 animation 製作動畫，就能產生跑馬燈效果，下方範例使用 max-content 屬性值取得內容最大寬度，平移使用「-101%」避免露出少部分文字，並搭配 CSS 變數取得父元素寬度，當移動到最左邊之後，根據父元素寬度設定平移到最右邊。

參考：translate() 平移、動畫 animation、max-content、CSS 變數

線上展示：https://codepen.io/oxxo/pen/yyBzNPr

<!-- HTML 程式碼 -->
<div>
  <h3>hello world! I am oxxo! How are you? I'm fine thank you!</h3>
</div>

<!-- CSS 程式碼 -->
<style>
  div {
    --w: 300px;         /* 設定變數，讓動畫可以使用 */
    width: var(--w);
    overflow: hidden;
    border: 1px solid #000;
    white-space: nowrap;
    font-size: 30px;
    box-shadow: inset 0 0 10px #0009;
  }
  h3 {
    transform: translateX(var(--w));    /* 縮排放到右邊 */
    width: max-content;                 /* 寬度等於內容最大寬度 */
    margin: 5px;
    animation: 10s go linear infinite;  /* 製作動畫 */
  }
  @keyframes go {
    0% {transform: translateX(var(--w));}  /* 起始位置為最右邊 */
    90% {transform: translateX(-101%);}    /* 90% 時移動到最左邊，使用 -101% 避免稍微露出文字 */
    100% {transform: translateX(-101%);}   /* 100% 時保持原本位置，產生間隔時間差 */
  }
</style>

小結

雖然純 CSS 跑馬燈的程式碼並不複雜，但當中會運用不少技巧，例如縮排、轉換、寬度、變數...等，不過只要熟練這些用法，就能輕鬆做出很酷炫的跑馬燈囉。

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～