跳到正文

Marquee 跑马灯

Marquee 让内容横向循环滚动。动画是纯 CSS 的:内容和它的副本一起按自身宽度平移,所以循环没有跳动;时长由测得的宽度和 speed 算出。副本对辅助技术隐藏,也拿不到焦点。

系统开启“减少动态效果”时,跑马灯静止不动,内容溢出时可以在 ScrollArea 里手动滚动。

演示

基础用法

可以放任意内容。在末尾留一点空白(这里用 padding-inline-end),免得转回来时首尾贴在一起。

自动填充

autoFill 会重复较短的内容直到填满宽度,转回来之前不会出现空白。

速度

speed 的单位是 px/秒,所以无论内容多宽,同样的速度看起来都一样快。

方向

悬停暂停

pauseOnHover 在指针悬停或焦点在其内部时暂停,方便阅读或使用其中的链接。

Marquee Props

名称类型默认值说明版本
autoFillbooleanfalse重复内容以填满宽度。未发布
directionleft | rightleft内容移动的方向。未发布
pauseOnHoverbooleanfalse悬停或内部获得焦点时暂停。未发布
speednumber48速度,单位 px/秒。未发布

Elegant 主题在两端让内容渐隐(--r-marquee-fade-width),Brutal 主题直接硬切。