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 跑马灯的程序码并不复杂，但当中会运用不少技巧，例如缩排、转换、宽度、变数...等，不过只要熟练这些用法，就能轻松做出很酷炫的跑马灯啰。

意见反馈