【免费下载链接】SkillsAgent skills for designers and builders using Codex, Claude, Cursor, and other AI coding agents项目地址https://gitcode.com/gh_mirrors/skills48/Skills点击查看免费下载本篇技术指南以 Skills 仓库中 agent-skills/web-design/marquee-loop/SKILL.md 为核心骨架系统讲解如何为 Logo 墙、用户评价、截图、标签云或短特性标签条等场景落地「无缝无限跑马灯seamless infinite marquee loop」。你将掌握其最关键的实现三步复制内容序列、以translateX从 0 线性动画到 -50%、保持项目宽度稳定同时学会边缘遮罩、悬停减速与prefers-reduced-motion无障碍处理并看到仓库内演示页 demo/index.html 的完整落地证据。一、技能定位什么时候该用 marquee-loopSKILL.md的 frontmatter 给出了技能的精确语义name: marquee-loop description: Apply seamless infinite marquee loops using duplicated items.它的适用场景Use When非常明确当设计需要一个用于 Logo、用户评价testimonials、截图、标签tags或短特性标签条short feature chips的无缝无限循环时才调用这个技能。这段描述划定了边界——跑马灯适合装饰性、可重复、低阅读负担的内容而不是需要用户逐字精读的信息。仓库配套的 demo/PROMPT.md 展示了该技能在 Agent 工作流中的典型用法Use $marquee-loop to create a responsive standalone HTML design...即把整个技能当作一条可注入的指令让 Codex、Claude、Cursor 等 Agent 据此生成完整页面。配套 demo/source.json 记录了该演示源自 Neuform 的 Landing Pagelanding-page-13设计其 skill 使用计数为 114当前在 marquee-loop 排名第 1按view_count desc排序。二、无缝循环的核心原理复制 0~-50% 位移SKILL.md的 Workflow 前三条构成了无缝跑马灯的全部物理基础复制项目序列把内容序列整体复制一份让序列结尾与开头完全吻合线性动画 0 到 -50%对轨道track施加从translateX(0)到translateX(-50%)的线性 transform保持项目宽度稳定所有项目宽度必须一致且固定否则循环衔接处会跳动。为什么是-50%因为轨道里放了两份完全相同的序列原序列 复制序列。当轨道向左移动恰好一个序列宽度即总宽度的 50%时视觉上第二份序列恰好占据了第一份序列的位置此时瞬间重置回 0% 也无从察觉——这就是无缝的来源。这一设计在 demo/index.html 中有直接实现证据其内嵌样式第 19 行的 base64 载荷内核心如下keyframes marquee { 0% { transform: translateX(0%); } 100% { transform: translateX(-50%); } } .animate-marquee { display: flex; animation: marquee 25s linear infinite; }25s linear infinite三个参数分别对应时长、缓动与循环次数linear是线性的关键——任何 ease-in/out 都会让速度不均匀破坏循环首尾衔接的匀速感infinite配合 -50% 位移实现永不停歇的循环。对应到 DOM 结构demo 中跑马灯条由两层构成!-- 外层overflow-hidden 裁切防止横向溢出 -- div classborder-b border-zinc-300/60 mb-6 md:mb-10 pb-4 overflow-hidden relative flex select-none !-- 轨道两份完全相同的序列 -- div classanimate-marquee flex whitespace-nowrap !-- Group 1lumina.studio · digital architecture · user experience · visual systems ... -- !-- Group 2与 Group 1 逐项完全相同Duplicate for seamless loop -- /div /div外层容器使用overflow-hidden裁掉超出视口的部分避免出现横向滚动条轨道.animate-marquee使用flex横向排列 whitespace-nowrap禁止换行保证序列在单行内连续两份 Group 的每一项品牌词 间隔圆点在内容、间距、宽度上逐一对齐注释明确写着 Group 2 (Duplicate for seamless loop)这正是 Workflow 第 1 步的落地形态。从实现上看demo 中的跑马灯条位于页面顶部 header 区域属于进入页面即呈现的装饰性信息流内容为品牌与业务方向关键词符合短标签条的使用前提。三、边缘处理遮罩与淡出Workflow 第 4 步要求在跑马灯进入或离开某个区块section时进行边缘遮罩mask或淡出fade处理典型做法是对容器施加mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent)让文字在左右两端渐隐避免内容凭空出现/消失的生硬感也可以使用绝对定位的左右渐变层叠加在轨道之上用 CSSlinear-gradient实现同等效果。demo 中虽然没有对顶部跑马灯条施加左右遮罩它本身就是通栏横贯的但该原则适用于跑马灯出现在内容块内部、两侧有其他模块的场景——例如把跑马灯放进一个卡片或 section 的中间层时边缘淡入淡出能显著提升视觉完成度。判断标准是只有当跑马灯在视觉上进入/退出一个明确的区域时才需要遮罩通栏满宽的跑马灯通常可以省略。四、交互节奏悬停仅在有用时才暂停Workflow 第 5 步给出了一条克制且务实的规则只有当交互对用户确实有用时才在悬停时暂停或减速跑马灯。对 Logo 墙、标签云这类无需阅读细节的内容悬停暂停反而打断浏览节奏通常不应添加对用户评价、产品特性条这类悬停后可能想看全的内容可以在悬停时暂停动画或显著减速给用户留出读取时间。CSS 实现只需一行.animate-marquee:hover { animation-play-state: paused; }五、无障碍尊重 prefers-reduced-motionWorkflow 第 6 步是硬性要求尊重prefers-reduced-motion用静态包裹static wrap或极慢速度替代动画。demo 的 Fidelity target见 demo/PROMPT.md也明确要求 stable when reduced motion is enabled。推荐实现是媒体查询降级为静态滚动包装器如overflow-x: auto的可手动滚动轨道或者将动画速度降至极慢media (prefers-reduced-motion: reduce) { .animate-marquee { animation-duration: 120s; /* 极慢近乎静止 */ /* 或直接 animation: none并保留 overflow-x: auto 供手动滚动 */ } }结合悬停暂停与减少动画两层约束可总结出完整降级策略默认匀速循环 → 悬停暂停可选→ 减少动效时降速或静态化。六、性能与内容护栏GuardrailsSKILL.md最后两条 Guardrails 是实战中极易被忽略、却直接决定体验质量的边界不要动画化用户必须仔细阅读的独特内容Do not animate unique content that users must read carefully。跑马灯意味着内容会不断移出视口任何需要精读的正文、条款、说明性长句都不应放入其中——这正是Use When只列举 Logo、评价、截图、标签、短特性条的原因。反过来它也是判断一个设计该不该用 marquee的反向判据。不要在每个移动元素上使用大型 CPU 密集型阴影或滤镜Do not use large CPU-heavy shadows or filters on every moving item。跑马灯是持续动画每个元素每帧都要被浏览器重绘/合成若再叠加filter: blur()、大面积box-shadow等重合成效果低端设备会明显掉帧。正确做法是把视觉重量压到容器或静态层上让移动层保持轻。从性能角度可补充两点工程实践优先使用transform: translateX()而非left/margin驱动动画transform 走合成器线程不触发 layout/paint轨道内元素数量保持克制若内容量很大优先缩短序列本身而不是无脑增加重复份数。七、如何在 Agent 工作流中消费该技能仓库把 marquee-loop 设计为可被 AI Agent 直接引用的 skill使用方式记录在 demo/PROMPT.md最小 PromptUse $marquee-loop to create a responsive standalone HTML design with the same visual confidence, hierarchy, and interaction finish as the included Neuform reference.——即以本技能为指令生成一个响应式、独立的 HTML 设计复刻 Prompt把demo/index.html当作视觉与交互参考not as a loose mood board完整复刻 Landing Page 的构图、信息密度、字号层级、间距节奏、表面处理、色彩关系与克制的动效并保持移动端到桌面端响应式、键盘可达、减少动效时稳定Remix Prompt保留底层布局逻辑、标志性视觉处理与交互编排替换品牌、主题、文案与配色输出同样体现该技能水平的 remix。配套 demo/source.json 还揭示了该 demo 的技术栈事实页面基于 Tailwind运行时由仓库 assets/runtime/runtime-ccc8894b3418-runtime.js 提供、GSAP 3.12.2assets/runtime/runtime-027051effa47-gsap-min.js、ScrollTriggerassets/runtime/runtime-689ca8dda44c-scrolltrigger-min.js与 iconify-iconassets/runtime/runtime-163ebd087cfc-iconify-icon-min.js并采用sandboxed-srcdoc-v1安全封装见其security_profile字段。也就是说marquee 本身只用纯 CSS 动画即可实现GSAP/ScrollTrigger 在本 demo 中负责的是标题逐词 reveal 等滚动动效这印证了跑马灯本体应保持轻量的架构思路。八、动手实现的最小可运行示例综合上述全部约束一个可复制的最小实现如下可直接粘贴为独立 HTML 验证效果!doctype html html langzh-CN head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1 style .marquee-viewport { overflow: hidden; border-block: 1px solid #e4e4e7; padding: 1rem 0; } .marquee-track { display: flex; width: max-content; gap: 2rem; animation: marquee 25s linear infinite; } .marquee-track * { white-space: nowrap; } keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* 可选悬停暂停 */ .marquee-viewport:hover .marquee-track { animation-play-state: paused; } /* 可选左右边缘渐隐 */ .marquee-fade { -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent); } /* 无障碍减少动效时降速 */ media (prefers-reduced-motion: reduce) { .marquee-track { animation-duration: 120s; } } /style /head body div classmarquee-viewport marquee-fade div classmarquee-track !-- 序列 A -- spanFeature 01/spanspanFeature 02/spanspanFeature 03/spanspanFeature 04/span !-- 序列 B与序列 A 完全相同宽度必须一致 -- spanFeature 01/spanspanFeature 02/spanspanFeature 03/spanspanFeature 04/span /div /div /body /html关键点回顾轨道width: max-content保证两份序列横向排布位移锁定-50%而非固定像素两份序列的每一项宽度保持一致本例中用固定gap 等宽短文本实现末尾通过prefers-reduced-motion降速兜底。将示例中的短文本替换为 Logo 图片、评价卡片或标签 chip 即可复用到任意场景。九、延伸阅读与仓库路径技能本体agent-skills/web-design/marquee-loop/SKILL.md完整落地演示含跑马灯轨道与 GSAP 滚动动效agent-skills/web-design/marquee-loop/demo/index.htmlAgent 调用提示词与保真目标agent-skills/web-design/marquee-loop/demo/PROMPT.md演示数据与运行时报关元数据agent-skills/web-design/marquee-loop/demo/source.json演示资源目录agent-skills/web-design/marquee-loop/demo/assets/演示预览图agent-skills/web-design/marquee-loop/demo/preview.jpg技能所在分类目录agent-skills/web-design/README.mdWeb 设计 / 动效 / 3D / UI 样式类技能总览若要继续深挖同仓库的动效类技能可对照查看 agent-skills/web-design/marquee-loop 同级的animation-systems、animation-on-scroll、staggered-word-reveal等目录它们与本技能共同构成了Web 动效主题的完整技能矩阵。赞分享【免费下载链接】SkillsAgent skills for designers and builders using Codex, Claude, Cursor, and other AI coding agents项目地址https://gitcode.com/gh_mirrors/skills48/Skills点击查看免费下载相关推荐Nuxt UI v4 Marquee 组件实战指南打造无缝无限滚动的跑马灯动画Nuxt UI v4 Marquee 组件实战指南打造无缝无限滚动的跑马灯动画 导读 Marquee跑马灯是 Nuxt UI v4 中用于创建无限滚动内容前端UI组件Rome 无障碍规则 noDistractingElements禁止 marquee 与 blink 等干扰性元素Rome 无障碍规则 noDistractingElements禁止 marquee 与 blink 等干扰性元素 RomeUnified develo开发工具Lint格式化前端构建编译器代码质量编辑器Naive UI Marquee 跑马灯组件完全指南无缝滚动原理、参数配置与实战示例Naive UI Marquee 跑马灯组件完全指南无缝滚动原理、参数配置与实战示例 Marquee跑马灯是 Naive UI 中一个轻量但实用的组件用前端UI组件上一篇如何快速创建360度全景图像AI全景生成终极指南下一篇WAAS安全配置完全指南保护您的音频数据隐私创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
