建立文字跑馬燈終極指南
文字跑馬燈是經典的網頁設計元素，用於顯示滾動資訊、新聞跑馬燈或吸引注意的公告。雖然 <marquee> 標籤已棄用，但現代CSS動畫能實現流暢、無障礙且高效能的滾動文字。
最佳實踐
- 無障礙功能： 確保使用者可以暫停動畫（例如滑鼠懸停時），以便有時間閱讀。
- 效能： 使用CSS轉換（
translate3d）取代變更left/top數值，以實現更流暢的60fps動畫。 - 可讀性： 保持滾動速度適中。太快會難以閱讀，太慢則顯得無聊。
現代實作
我們的工具使用 @keyframes 產生純 CSS 解決方案。這確保了與所有現代瀏覽器的相容性，無需依賴已淘汰的 HTML 標籤或龐大的 JavaScript 函式庫。
SEO備註
搜尋引擎可以正常讀取 CSS 跑馬燈內的文字。但請確保內容與您的頁面相關。避免將重要內容隱藏在快速移動的跑馬燈中，因為部分使用者可能會錯過。