CSS隨便玩 - 跑馬燈效果

還記得在限量國小的時期，當時看到網頁上有跑馬燈的效果就會覺得這個網頁真的是太Fashion了。但時代在走，Fashion還是要有，一堆Fade, Ripple, Twist...等特效整個打趴跑馬燈，現在看到跑馬燈就會覺得很Low。這篇不是要討論跑馬燈Low不Low的問題，而是要來玩看看跑馬燈。


限量的實作考量到幾點：

1. 提供一個區域空間作為跑馬燈的動作區域，這個區域大小可自訂
2. 使用條列式來區隔跑馬燈內容
3. 跑馬燈動作為從右至左跑，等內容完全跑完消失後再重新從右方出現

以下為實作的範例程式碼：


CSS

.marqee {
 height: 3em;
 margin: 0 auto;
 overflow: hidden; 
 position: relative;
 background: black;
}

.marqee > ul {
 padding-left: 0;
 display: flex;
 list-style-type: none;
 animation: marqee 15s linear infinite;
 position: absolute;
}

.marqee > ul > li {
 white-space: nowrap;
 margin-right: 2em;
 font-weight: bold;
 color: yellow;
}

@keyframes marqee {
 0% {
  left: 100%;
  transform: translateX(0%);
 }

 100% {
  left: 0;
  transform: translateX(-100%);
 }
}

HTML

<div class="marqee">
 <ul>
  <li>2017 WBC A組預賽賽程</li>
  <li>3/6 17:30 以色列 @ 南韓</li>
  <li>3/7 11:00 以色列 @ 中華台北</li>
  <li>3/7 17:30 南韓 @ 荷蘭</li>
  <li>3/8 17:30 中華台北 @ 荷蘭</li>
  <li>3/9 11:00 荷蘭 @ 以色列</li>
  <li>3/9 17:30 南韓 @ 中華台北</li>
 </ul>
</div>

執行結果

展示網址：CSS Marquee Demo

實作說明

整個跑馬燈效果都是用CSS3完成。首先，在結構上限量使用一個 div 套上 marqee 的 CSS 類別，此為跑馬燈的區域。接著裡面使用 ul li 的元素來當作內容的跑馬燈，li 為每個不同的跑馬燈內容，而 ul 則是所有內容的容器。在結構上，我們看到會動的其實是 ul，內容看到的雖然是一行，但其實是由多個 li 內容組成。

接著以下為實作的幾個重點：

• 在 ul 使用 display: flex 讓多個 li 內容整合成同一行。
• 在 li 使用 white-space: nowrap 避免內容過長而自動換行。
• 在 keyframes 的定義中主要述說的兩個動作的同時移動，第一個動作為位置從 left: 100% 移動到 left: 0；第二個動作為從相對位置起點 0 移動到相對位置 -100%，兩個動作要注意的是，第一個針對的是 div.marqee 位置，第二個針對的是 ul 的位置。
• 在 marqee 設定 overflow: hidden 避免顯示 Scrollbar 並隱藏顯示過的內容。

在最後順道提一下，其實HTML有提供跑馬燈的元素<marquee></marquee
>，但後面就把他移除規格了，雖然有些 Browser 還是有支援，但 MDN 官網說明最好還是不要用。CSS 本來也把 marquee 列入 Animation 的效果裡，可是最後也是不了了之。