--- title: "Marquee" type: component version: "2.2.2" doc_version: "2.7.3" status: stable date: 2026-07-05 library: Frutjam stack: tailwind_css compatibility: universal framework_agnostic: true runtime_requirement: none description: "Pure CSS Tailwind CSS Marquee with infinite scroll, pause-on-hover, reverse direction, and vertical support. No JavaScript required." url: https://frutjam.com/zh-hant/components/marquee --- # Marquee Marquee 元件可建立無限、連續滾動的內容條 - 非常適合品牌標誌、公告橫幅、推薦或標籤雲。 Frutjam 字幕完全採用 CSS 動畫構建，支援水平和垂直方向、懸停暫停、可逆播放和速度控制。複製 `marquee-track` 元素（使用 `aria-hidden`）以獲得無縫、無間隙的循環。 僅 CSS，無需 JavaScript。 WCAG AA 可存取且與框架無關 - 可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。 | 班級 | 類型 | 描述 | | ---------------- | ----- | ----------------------------- | | marquee | 根據 | 外部容器——剪輯溢出並保存動畫變量 | | marquee-track | 修飾符 | 滾動內行；使用 aria-hidden 複製以實現無縫循環 | | marquee-pause | 修飾符 | 懸停時暫停動畫 | | marquee-reverse | 修飾符 | 向相反方向滾動 | | marquee-vertical | 修飾符 | 從上到下滾動而不是從左到右滾動 | | marquee-slow | Speed | 慢速滾動（40秒循環） | | marquee-normal | Speed | 預設速度（20秒循環） | | marquee-fast | Speed | 快速滾動（10秒循環） | | marquee-fade | 修飾符 | 在兩側添加漸層淡出邊緣 | ## 基本用法 增加兩個相同的 `marquee-track` 元素 - 第二個元素（帶有 `aria-hidden="true"`）會在第一個元素滾出螢幕時填滿間隙。 ## 懸停時暫停 新增 `marquee-pause` 以在使用者將滑鼠懸停在條帶上時停止動畫。 ```html
Hover me to pause the scroll Animation stops here
``` ## 反向 使用marquee-reverse從右向左滾動而不是從左向右滾動。合併兩行以獲得分層效果。 ```html
Alpha Beta Gamma Delta Epsilon
Alpha Beta Gamma Delta Epsilon
``` ## 速度變化 ```html
Slow Slow Slow Slow Slow
Normal Normal Normal Normal Normal
Fast Fast Fast Fast Fast
``` ## 垂直跑馬燈 新增 `marquee-vertical` 並為容器提供固定高度以實現從上到下滾動。 ```html
Announcement one
Announcement two
Announcement three
Announcement four
Announcement five
``` ## 技術標籤 展示技能集或技術堆疊的常見模式。 ```html
HTML CSS JavaScript TypeScript React Vue Tailwind CSS Node.js
``` ## 客製化間隙 使用內聯實用程式覆寫 `--marquee--gap` 或 `--marquee--duration` 來微調間距和速度。 ```html
Wide gap Wide gap Wide gap Wide gap
``` ## 淡化邊緣 添加 `marquee-fade` 將條帶的兩端淡出到頁面背景中，以獲得精美的外觀。 ```html
Design Development Performance Accessibility Open Source Security Testing
``` ## 公告橫幅 用於促銷或全網站通知的細長股票欄。結合 `marquee-fade` 和 `marquee-pause` 以獲得最佳體驗。 ```html
🎉 Version 2.0 is here — explore what's new 🌿 Built with Tailwind CSS v4 ⚡ Zero JavaScript, pure CSS components 🎨 Fully themeable with CSS variables
``` ## 標誌跑馬燈 在連續滾動條中展示合作夥伴或值得信賴的品牌。使用`marquee-fade`將邊緣整合到背景中。 ```html
Acme
Globex
Initech
Umbrella
Hooli
Pied Piper
Vehement
Massive
``` ## 推薦卡 捲動推薦卡，並在懸停時輕微暫停以提高可讀性。 ```html

"Absolutely love the component library. Saves us hours every sprint."

A

Alex Morgan

Frontend Engineer

"The best Tailwind UI kit I've used. Clean, accessible, and easy to customize."

J

Jamie Lee

Product Designer

"Shipped our design system 3× faster thanks to Frutjam. Highly recommend."

S

Sam Rivera

Tech Lead

"Great DX, thoughtful defaults, and the dark mode just works out of the box."

R

Riley Chen

Full Stack Developer

```