尧图网站建设 
hallmark 指南Ft8 Marquee Scroll 跑马灯组件——用 CSS 无限滚动打造运动感、品牌向的强律动页脚【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark导读本文讲解 hallmark 设计技能库中 Ft8「Marquee scroll跑马灯滚动」组件源码位于 skills/hallmark/references/components/ft8-marquee-scroll.md的完整实现与使用边界如何用两行重复文案 单条keyframes动画构建一条横向无限循环的 tagline 滚动条让品牌口号在页面底部持续流动。你会学到它的 HTML/CSS 最小实现、prefers-reduced-motion无障碍处理、与 Ft4 密集排印页脚的正确区分方式以及结合仓库真实示例BananaStudio衍生出的进阶玩法与配置化参数。一、组件定位Ft8 是什么Ft8 是 hallmark 组件库中 Footer 家族的一个成员前缀ft footer核心形态是一条水平方向的、无限循环滚动的文案流由「重复的 tagline 圆点分隔符」组成STUDIO · 2026 · STUDIO · 2026 · STUDIO · 2026 ·它的典型使用场景是运动品类站点、时装 Lookbook品牌目录册、品牌导向的创意代理商首页。当品牌声音是响亮、动能十足、偏运动或宣言式的Ft8 就比静态页脚更契合视觉气质。文档同时给出一个明确的混淆排除项Dont confuse with Ft4 Dense typographic见 skills/hallmark/references/components/ft4-dense-typographic.mdFt4 是一整块静态的密集小字号排印文本版权、参考、许可证、地址等 colophon 收尾信息不滚动Ft8 是运动的两者场景完全相反。何时使用 / 何时不用情形结论品牌声音 loud、kinetic、sport/manifesto✅ 适合使用 Ft8editorial / quiet安静编辑感语境⛔ 反模式运动感会显得吵闹需要 colophon 式静态版权信息用 Ft4 密集排印而非 Ft8二、最小实现HTML 结构Ft8 的文档给出可直接复制的标记footer classfoot-marquee aria-labelFooter div classfoot-marquee__track aria-hiddentrue spanSTUDIO · 2026 · STUDIO · 2026 · STUDIO · 2026 · STUDIO · 2026 ·/span spanSTUDIO · 2026 · STUDIO · 2026 · STUDIO · 2026 · STUDIO · 2026 ·/span /div p classvisually-hiddenStudio · 2026 · MIT licensed/p /footer三个关键点两个一模一样的span滚动动画靠translateX(-50%)平移只有 track 里有两份等宽的内容位移一半才能无缝首尾衔接形成「无限」循环。aria-hiddentrue加在 track 上滚动的装饰性文本对屏幕阅读器没有语义价值必须隐藏。visually-hidden提供可访问文本真实信息如Studio · 2026 · MIT licensed通过视觉隐藏但可被读屏器读取的方式补回确保无障碍信息不丢失。这与 hallmark 的visually-hidden工具类可见样式隐藏、可访问性保留一脉相承。实现细节由于两个 span 是同一内容的两份拷贝translateX(-50%)精确移动「一份」的宽度动画结束时画面与起始帧完全一致从而无跳变地持续循环。三、最小实现CSS 与动画.foot-marquee { overflow: hidden; border-top: 2px solid var(--color-ink); } .foot-marquee__track { display: flex; gap: var(--space-2xl); white-space: nowrap; padding-block: var(--space-md); animation: foot-marquee 32s linear infinite; } .foot-marquee__track span { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.08em; font-size: clamp(1rem, 2.5vw, 1.5rem); } keyframes foot-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } media (prefers-reduced-motion: reduce) { .foot-marquee__track { animation: none; } }逐条拆解overflow: hidden把滚出视口的文本裁掉形成「从边缘流走又流回」的错觉。display: flex; white-space: nowrap两个 span 并排一行、不换行。gap: var(--space-2xl)与padding-block: var(--space-md)控制条带内部节奏与垂直呼吸感。这些变量来自 hallmark 的设计令牌系统site/css/tokens.css不同主题下具体取值不同。animation: foot-marquee 32s linear infinite32 秒匀速、无限循环。linear保证全程匀速没有变速感。clamp(1rem, 2.5vw, 1.5rem)字号随视口平滑缩放小屏不缩死、大屏不失控。prefers-reduced-motion: reduce下animation: none这是 hallmark 的无障碍硬性要求文档明确写为 always honour。用户开启系统级「减弱动态效果」后跑马灯立即静止为静态横幅。四、设计意图与反模式边界文档明确给出唯一反模式Anti-pattern:在 editorial / quiet 语境下使用 Ft8 —— 运动感会读作「吵闹」。只与 playful / sport / manifesto 的声音搭配并且始终遵守prefers-reduced-motion: reduce。这与 hallmark 整体运动哲学一致。在 skills/hallmark/references/motion.md 中全局原则是「大部分 AI 生成的动效是零散的——每个卡片悬停、每个滚动淡入、弹跳图标请安静下来。一次有编排的时刻胜过十次小动作」且明确将无限循环列为需要谨慎的对象。Ft8 属于「功能性/装饰性无限循环」中少数被允许的例外——但前提是声音够 loud且它是整页唯一的循环元素而不是一堆动效叠在一起。实践建议一页只放一条跑马灯。如果 hero 已经有一条 marquee例如 hallmark 的 Marquee Hero 宏结构见 skills/hallmark/references/macrostructures/03-marquee-hero.md页脚再叠 Ft8 就会变成「双循环」的视觉噪音。五、仓库实战佐证BananaStudio 的进阶跑马灯在仓库的完整示例页 site/examples/bananastudio/index.html 中同一条 marquee 被升级成了「品牌词汇条」实现了文档思想的可变体扩展section classmarquee aria-labelWardrobe samples div classmarquee__track aria-hiddentrue span classmarquee__wordBoardroom/span span classmarquee__word marquee__word--muteEditorial/span span classmarquee__wordDaylight/span span classmarquee__word marquee__word--muteOn-set/span span classmarquee__wordNoir/span span classmarquee__word marquee__word--mutePress/span span classmarquee__wordBoardroom/span span classmarquee__word marquee__word--muteEditorial/span span classmarquee__wordDaylight/span span classmarquee__word marquee__word--muteOn-set/span span classmarquee__wordNoir/span span classmarquee__word marquee__word--mutePress/span /div /section对应的样式site/examples/bananastudio/styles.css展示了四条值得借鉴的变体手法独立的词 ::after圆点分隔符文档版把·写进文本BananaStudio 改为每个词后追加一个::after圆点12px 圆形、var(--color-accent)填充带光晕语义上完全等价于 Ft8 的「tagline dot separator」。强弱交替--mute实心高亮词与空心弱化词交替制造节奏变化。两侧渐变淡出::before/::after渐变蒙版条带左右边缘用linear-gradient让文字淡出强化「从画布边缘生长出来」的品牌感。悬停暂停.marquee__track:hover { animation-play-state: paused; }尊重用户的阅读权。同时它也保留了 Ft8 的骨架内容复制两份、animation: marquee var(--dur-marquee) linear infinite、keyframes marquee { to { transform: translateX(-50%); } }动画时长抽成令牌--dur-marquee: 48ssite/examples/bananastudio/tokens.css字号令牌为--text-marquee: clamp(2.5rem, 7vw, 6.5rem)同文件 site/examples/bananastudio/tokens.css并在prefers-reduced-motion: reduce下完全关闭动画styles.css 中的 Reduced motion 区块。注意文档版时长 32s、字号偏小偏正文BananaStudio 把时长拉长到 48s、字号放大到 hero 级别2.5rem→6.5rem说明同一条跑马灯骨架可以按「页脚装饰条」或「品牌陈述条」两种强度复用。可配置化对照表参数文档版Ft8 页脚BananaStudio 示例site/examples/bananastudio/tokens.css动画时长固定32s--dur-marquee: 48s令牌化字号clamp(1rem, 2.5vw, 1.5rem)--text-marquee: clamp(2.5rem, 7vw, 6.5rem)分隔符文本中的·::after圆点accent 填充 光晕节奏变体无实心/空心词交替--mute边缘处理直接裁切左右渐变淡出蒙版悬停无特殊处理animation-play-state: paused减少动态animation: noneanimation: none; transform: none;六、定制与接入建议把 Ft8 接入你自己的站点时按以下顺序落地HTML保留footer classfoot-marquee结构把两个 span 里的STUDIO · 2026 ·换成你的 tagline确保aria-hidden与visually-hidden配对完整。CSS直接粘贴文档版样式并把硬编码值替换为你主题的令牌——--color-ink、--font-display、--space-2xl、--space-md均在 hallmark 主题令牌中定义示例见 site/css/tokens.css。时长与速度文档默认 32s内容更长或想更从容可像 BananaStudio 一样抽成--dur-marquee令牌想让观众读清文字考虑加hover暂停。无障碍务必保留prefers-reduced-motion: reduce分支如果不想用全局关闭至少针对.foot-marquee__track { animation: none; }单独关闭。自检slop 测试对照 hallmark 的 slop-testskills/hallmark/references/slop-test.md检查——跑马灯是否每页至多一条、是否配合了有足够响亮的 display 字体、在 editorial 页面是否误用了 Ft8。七、小结Ft8 Marquee scroll 是 hallmark 组件库中「用一条 CSS 动画传递品牌动能」的最小单元两个重复 span、一条translateX(-50%)的 keyframes、一行prefers-reduced-motion兜底就能生成运动感十足的页脚或装饰条。它的适用边界非常明确——只服务 loud / kinetic / sport / manifesto 的声音安静或编辑向页面请退回 Ft4 密集排印。仓库的 BananaStudio 示例进一步证明同一骨架可以通过令牌化时长、强化字号、圆点分隔符、渐变淡出与悬停暂停扩展成 hero 级的品牌陈述条实现「页脚装饰 → 品牌声明」的两档复用。如果要深入学习整个 Footer 组件家族或动效语言可继续阅读 skills/hallmark/references/components/ft4-dense-typographic.md、skills/hallmark/references/motion.md 与 skills/hallmark/references/components/ft7-newsletter-first.md。【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 hallmark 指南：Ft8 Marquee Scroll 跑马灯组件——用 CSS 无限滚动打造运动感、品牌向的强律动页脚
hallmark 指南Ft8 Marquee Scroll 跑马灯组件——用 CSS 无限滚动打造运动感、品牌向的强律动页脚【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark导读本文讲解 hallmark 设计技能库中 Ft8「Marquee scroll跑马灯滚动」组件源码位于 skills/hallmark/references/components/ft8-marquee-scroll.md的完整实现与使用边界如何用两行重复文案 单条keyframes动画构建一条横向无限循环的 tagline 滚动条让品牌口号在页面底部持续流动。你会学到它的 HTML/CSS 最小实现、prefers-reduced-motion无障碍处理、与 Ft4 密集排印页脚的正确区分方式以及结合仓库真实示例BananaStudio衍生出的进阶玩法与配置化参数。一、组件定位Ft8 是什么Ft8 是 hallmark 组件库中 Footer 家族的一个成员前缀ft footer核心形态是一条水平方向的、无限循环滚动的文案流由「重复的 tagline 圆点分隔符」组成STUDIO · 2026 · STUDIO · 2026 · STUDIO · 2026 ·它的典型使用场景是运动品类站点、时装 Lookbook品牌目录册、品牌导向的创意代理商首页。当品牌声音是响亮、动能十足、偏运动或宣言式的Ft8 就比静态页脚更契合视觉气质。文档同时给出一个明确的混淆排除项Dont confuse with Ft4 Dense typographic见 skills/hallmark/references/components/ft4-dense-typographic.mdFt4 是一整块静态的密集小字号排印文本版权、参考、许可证、地址等 colophon 收尾信息不滚动Ft8 是运动的两者场景完全相反。何时使用 / 何时不用情形结论品牌声音 loud、kinetic、sport/manifesto✅ 适合使用 Ft8editorial / quiet安静编辑感语境⛔ 反模式运动感会显得吵闹需要 colophon 式静态版权信息用 Ft4 密集排印而非 Ft8二、最小实现HTML 结构Ft8 的文档给出可直接复制的标记footer classfoot-marquee aria-labelFooter div classfoot-marquee__track aria-hiddentrue spanSTUDIO · 2026 · STUDIO · 2026 · STUDIO · 2026 · STUDIO · 2026 ·/span spanSTUDIO · 2026 · STUDIO · 2026 · STUDIO · 2026 · STUDIO · 2026 ·/span /div p classvisually-hiddenStudio · 2026 · MIT licensed/p /footer三个关键点两个一模一样的span滚动动画靠translateX(-50%)平移只有 track 里有两份等宽的内容位移一半才能无缝首尾衔接形成「无限」循环。aria-hiddentrue加在 track 上滚动的装饰性文本对屏幕阅读器没有语义价值必须隐藏。visually-hidden提供可访问文本真实信息如Studio · 2026 · MIT licensed通过视觉隐藏但可被读屏器读取的方式补回确保无障碍信息不丢失。这与 hallmark 的visually-hidden工具类可见样式隐藏、可访问性保留一脉相承。实现细节由于两个 span 是同一内容的两份拷贝translateX(-50%)精确移动「一份」的宽度动画结束时画面与起始帧完全一致从而无跳变地持续循环。三、最小实现CSS 与动画.foot-marquee { overflow: hidden; border-top: 2px solid var(--color-ink); } .foot-marquee__track { display: flex; gap: var(--space-2xl); white-space: nowrap; padding-block: var(--space-md); animation: foot-marquee 32s linear infinite; } .foot-marquee__track span { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.08em; font-size: clamp(1rem, 2.5vw, 1.5rem); } keyframes foot-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } media (prefers-reduced-motion: reduce) { .foot-marquee__track { animation: none; } }逐条拆解overflow: hidden把滚出视口的文本裁掉形成「从边缘流走又流回」的错觉。display: flex; white-space: nowrap两个 span 并排一行、不换行。gap: var(--space-2xl)与padding-block: var(--space-md)控制条带内部节奏与垂直呼吸感。这些变量来自 hallmark 的设计令牌系统site/css/tokens.css不同主题下具体取值不同。animation: foot-marquee 32s linear infinite32 秒匀速、无限循环。linear保证全程匀速没有变速感。clamp(1rem, 2.5vw, 1.5rem)字号随视口平滑缩放小屏不缩死、大屏不失控。prefers-reduced-motion: reduce下animation: none这是 hallmark 的无障碍硬性要求文档明确写为 always honour。用户开启系统级「减弱动态效果」后跑马灯立即静止为静态横幅。四、设计意图与反模式边界文档明确给出唯一反模式Anti-pattern:在 editorial / quiet 语境下使用 Ft8 —— 运动感会读作「吵闹」。只与 playful / sport / manifesto 的声音搭配并且始终遵守prefers-reduced-motion: reduce。这与 hallmark 整体运动哲学一致。在 skills/hallmark/references/motion.md 中全局原则是「大部分 AI 生成的动效是零散的——每个卡片悬停、每个滚动淡入、弹跳图标请安静下来。一次有编排的时刻胜过十次小动作」且明确将无限循环列为需要谨慎的对象。Ft8 属于「功能性/装饰性无限循环」中少数被允许的例外——但前提是声音够 loud且它是整页唯一的循环元素而不是一堆动效叠在一起。实践建议一页只放一条跑马灯。如果 hero 已经有一条 marquee例如 hallmark 的 Marquee Hero 宏结构见 skills/hallmark/references/macrostructures/03-marquee-hero.md页脚再叠 Ft8 就会变成「双循环」的视觉噪音。五、仓库实战佐证BananaStudio 的进阶跑马灯在仓库的完整示例页 site/examples/bananastudio/index.html 中同一条 marquee 被升级成了「品牌词汇条」实现了文档思想的可变体扩展section classmarquee aria-labelWardrobe samples div classmarquee__track aria-hiddentrue span classmarquee__wordBoardroom/span span classmarquee__word marquee__word--muteEditorial/span span classmarquee__wordDaylight/span span classmarquee__word marquee__word--muteOn-set/span span classmarquee__wordNoir/span span classmarquee__word marquee__word--mutePress/span span classmarquee__wordBoardroom/span span classmarquee__word marquee__word--muteEditorial/span span classmarquee__wordDaylight/span span classmarquee__word marquee__word--muteOn-set/span span classmarquee__wordNoir/span span classmarquee__word marquee__word--mutePress/span /div /section对应的样式site/examples/bananastudio/styles.css展示了四条值得借鉴的变体手法独立的词 ::after圆点分隔符文档版把·写进文本BananaStudio 改为每个词后追加一个::after圆点12px 圆形、var(--color-accent)填充带光晕语义上完全等价于 Ft8 的「tagline dot separator」。强弱交替--mute实心高亮词与空心弱化词交替制造节奏变化。两侧渐变淡出::before/::after渐变蒙版条带左右边缘用linear-gradient让文字淡出强化「从画布边缘生长出来」的品牌感。悬停暂停.marquee__track:hover { animation-play-state: paused; }尊重用户的阅读权。同时它也保留了 Ft8 的骨架内容复制两份、animation: marquee var(--dur-marquee) linear infinite、keyframes marquee { to { transform: translateX(-50%); } }动画时长抽成令牌--dur-marquee: 48ssite/examples/bananastudio/tokens.css字号令牌为--text-marquee: clamp(2.5rem, 7vw, 6.5rem)同文件 site/examples/bananastudio/tokens.css并在prefers-reduced-motion: reduce下完全关闭动画styles.css 中的 Reduced motion 区块。注意文档版时长 32s、字号偏小偏正文BananaStudio 把时长拉长到 48s、字号放大到 hero 级别2.5rem→6.5rem说明同一条跑马灯骨架可以按「页脚装饰条」或「品牌陈述条」两种强度复用。可配置化对照表参数文档版Ft8 页脚BananaStudio 示例site/examples/bananastudio/tokens.css动画时长固定32s--dur-marquee: 48s令牌化字号clamp(1rem, 2.5vw, 1.5rem)--text-marquee: clamp(2.5rem, 7vw, 6.5rem)分隔符文本中的·::after圆点accent 填充 光晕节奏变体无实心/空心词交替--mute边缘处理直接裁切左右渐变淡出蒙版悬停无特殊处理animation-play-state: paused减少动态animation: noneanimation: none; transform: none;六、定制与接入建议把 Ft8 接入你自己的站点时按以下顺序落地HTML保留footer classfoot-marquee结构把两个 span 里的STUDIO · 2026 ·换成你的 tagline确保aria-hidden与visually-hidden配对完整。CSS直接粘贴文档版样式并把硬编码值替换为你主题的令牌——--color-ink、--font-display、--space-2xl、--space-md均在 hallmark 主题令牌中定义示例见 site/css/tokens.css。时长与速度文档默认 32s内容更长或想更从容可像 BananaStudio 一样抽成--dur-marquee令牌想让观众读清文字考虑加hover暂停。无障碍务必保留prefers-reduced-motion: reduce分支如果不想用全局关闭至少针对.foot-marquee__track { animation: none; }单独关闭。自检slop 测试对照 hallmark 的 slop-testskills/hallmark/references/slop-test.md检查——跑马灯是否每页至多一条、是否配合了有足够响亮的 display 字体、在 editorial 页面是否误用了 Ft8。七、小结Ft8 Marquee scroll 是 hallmark 组件库中「用一条 CSS 动画传递品牌动能」的最小单元两个重复 span、一条translateX(-50%)的 keyframes、一行prefers-reduced-motion兜底就能生成运动感十足的页脚或装饰条。它的适用边界非常明确——只服务 loud / kinetic / sport / manifesto 的声音安静或编辑向页面请退回 Ft4 密集排印。仓库的 BananaStudio 示例进一步证明同一骨架可以通过令牌化时长、强化字号、圆点分隔符、渐变淡出与悬停暂停扩展成 hero 级的品牌陈述条实现「页脚装饰 → 品牌声明」的两档复用。如果要深入学习整个 Footer 组件家族或动效语言可继续阅读 skills/hallmark/references/components/ft4-dense-typographic.md、skills/hallmark/references/motion.md 与 skills/hallmark/references/components/ft7-newsletter-first.md。【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考