滾動文字在網頁中可通過三種方法實現：1.使用html的
滾動文字在網頁中雖然用得不多了，但偶爾還能見到一些信息提示類的應用，比如新聞頭條、公告欄等。實現方法其實不復雜，主要是通過 HTML 的
1. 使用
這是最直接的方法，HTML 原生支持的一個標簽，可以直接讓文字水平或垂直滾動。
<marquee>這是一段水平滾動的文字</marquee>
還可以設置方向：
立即學習“前端免費學習筆記（深入）”；
<marquee direction="up">這段文字會向上滾動</marquee>
常見屬性包括：
- direction：設置滾動方向（left, right, up, down）
- behavior：滾動方式（scroll, slide, alternate）
- loop：滾動次數，默認無限循環
- scrollamount：滾動速度，數值越大越快
優點是寫法簡單，適合快速實現；缺點是兼容性和現代瀏覽器支持一般，且不符合語義化標準。
2. 用 CSS 動畫實現更靈活的滾動效果
如果希望控制得更精細一點，可以用 CSS 的 @keyframes 來做動畫滾動。
<div class="scroll-text"> <p>這是一段通過 CSS 實現的滾動文字</p> </div>
配合 CSS：
.scroll-text { width: 100%; overflow: hidden; white-space: nowrap; } .scroll-text p { display: inline-block; padding-left: 100%; animation: scrollLeft 10s linear infinite; } @keyframes scrollLeft { from { transform: translateX(0); } to { transform: translateX(-100%); } }
這種方式可以自定義動畫時間、方向、緩動函數等，也更容易和響應式布局結合使用。
3. JavaScript 控制動態滾動行為
如果你需要根據用戶操作或其他事件來控制滾動文字的啟停、方向變化等，可以用 JS 配合樣式控制。
例如添加一個按鈕來暫停/繼續滾動：
<button onclick="toggleScroll()">暫停/繼續</button> <div id="js-scroll" class="scroll-text-js"> 這段文字可以通過點擊按鈕控制滾動狀態 </div>
JS 部分：
let isScrolling = true; function toggleScroll() { isScrolling = !isScrolling; const el = document.getElementById('js-scroll'); el.style.animationPlayState = isScrolling ? 'running' : 'paused'; }
CSS 中要加上 animation-play-state 的支持：
.scroll-text-js { animation: scrollLeft 10s linear infinite; }
這種方法適合需要交互控制的場景，比如鼠標懸停暫停、點擊切換方向等。
基本上就這些方法了。如果你想快速實現，
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
