Marquee 跑马灯
Marquee 让内容横向循环滚动。动画是纯 CSS 的:内容和它的副本一起按自身宽度平移,所以循环没有跳动;时长由测得的宽度和 speed 算出。副本对辅助技术隐藏,也拿不到焦点。
系统开启“减少动态效果”时,跑马灯静止不动,内容溢出时可以在 ScrollArea 里手动滚动。
演示
基础用法
可以放任意内容。在末尾留一点空白(这里用 padding-inline-end),免得转回来时首尾贴在一起。
自动填充
autoFill 会重复较短的内容直到填满宽度,转回来之前不会出现空白。
速度
speed 的单位是 px/秒,所以无论内容多宽,同样的速度看起来都一样快。
方向
悬停暂停
pauseOnHover 在指针悬停或焦点在其内部时暂停,方便阅读或使用其中的链接。
Marquee Props
| 名称 | 类型 | 默认值 | 说明 | 版本 |
|---|---|---|---|---|
autoFill | boolean | false | 重复内容以填满宽度。 | 未发布 |
direction | left | right | left | 内容移动的方向。 | 未发布 |
pauseOnHover | boolean | false | 悬停或内部获得焦点时暂停。 | 未发布 |
speed | number | 48 | 速度,单位 px/秒。 | 未发布 |
Elegant 主题在两端让内容渐隐(--r-marquee-fade-width),Brutal 主题直接硬切。