用纯 HTML 和 CSS 循环动画替代首页演示视频

一段 clip 是 10 秒循环的简化 UI，用纯 HTML 和 CSS 写成。它在任何尺寸下都清晰，跟随你的主题，在任何 JavaScript 加载之前就能播放，而且你改的是代码而不是重新录屏。它在任何框架里都能用。 Using config: /home/ada/acme/stepshots.config.json Created: output/signup-flow.stepshot (4 steps) stepshots upload output/signup-flow.stepshot 这些都是使用示例数据的真实 Stepshots 流程。本页上的三段 clip 共用一份 gzip 后 3.3 KB 的样式表，而且它们都没有用 JavaScript。 工具状态、两个浮层，以及一个在 Saved 和 Save 之间切换的标签。 分析 Acme 引导流程 数字随点击而变，还有一条 SVG 线自己画出来。 提示词 把它粘贴到你的编程 agent 里，填入要展示的功能。 复制提示词 为我的营销页面做一个循环播放的产品演示 clip，用纯 HTML 和 CSS keyframes 写成模拟 UI。不要视频，不要 GIF，不要 JavaScript。 要展示的功能：[描述一个简短的流程，例如“用户邀请了一位队友，席位数量随之增加”] 规则：

1. 只展示产品实际做的事情。先阅读真实 UI，逐字照抄它的标签。产品会产生输出的地方，运行它并照抄结果。可以简化，但绝不编造功能、按钮或结果。示例数据使用虚构公司，比如 Acme。
2. 把故事写成 3 到 4 个节拍，放在 10 秒、0–100% 的时间轴上。开头留 3%、结尾留 4%，用于 clip 主体的循环淡出。
3. 基础样式就是最后一帧。在没有 keyframes 的情况下，每个元素都必须已经呈现完成状态，所以任何在循环中离场的元素，基础样式都要是 opacity: 0。
4. 所有尺寸都用 em，让模拟界面像视频一样缩放： .fc { container-type: inline-size; width: 100%; aspect-ratio: 740 / 415; } .fc-stage { position: relative; height: 100%; overflow: hidden; font-size: 2.2cqw; } 舞台大约是 45.45em × 25.5em。clip 内部避免使用 px。
5. 使用项目的主题 token，让 clip 跟随明暗主题。只对现实中只有一种颜色的东西硬编码，比如终端。
6. 通过可复用的类共享时间（例如 fc-in-30 在 30% 时出现），而不是每个元素一个 keyframe。打字效果通过把 clip-path: inset(0 100% 0 0) 按字符数用 steps() 步进到 inset(0) 来实现。
7. 对于会变化的值，把两者叠放在同一个 grid 单元格里。用 step-end 瞬间切换文字，因为两个标签在淡入淡出中途会糊在一起。
8. 给光标单独写 keyframes，用 top/left 百分比定位，每次点击时短暂 scale(0.8)。光标的尖端是左上角，所以要瞄准目标附近，而不是压在它的文字上。
9. 加上这段，否则循环 clip 会停在它的重置状态： .fc-body, .fc-body * { animation: none !important; } .fc-cursor { display: none; }
10. 加上 role="img" 和描述 clip 中发生了什么的 aria-label。 用我框架的组件语法，但输出保持纯 HTML 和 CSS。 然后检查它：用 document.getAnimations() 暂停所有动画，把 currentTime 设到每个节拍的一帧，逐个截图。确认光标落在目标上、在 390px 宽度下没有溢出、两种主题都正常、reduced-motion 下的那一帧读起来正确。 最小的可用 clip 不需要构建步骤或库。因为它是纯标记，只需改模板语法就能移植到 React、Vue、Svelte、Astro、Rails 或 Dioxus。

<div class="fc" role="img" aria-label="A status changes from Draft to Published"> <div class="fc-stage"> <div class="fc-body"> <span class="swap"> <span class="draft">Draft</span> <span class="live">Published</span> </span> </div> </div> </div> <style> .fc { container-type: inline-size; width: 100%; aspect-ratio: 740 / 415; } .fc-stage { position: relative; height: 100%; overflow: hidden; font-size: 2.2cqw; } .fc-body { animation: fc-loop 10s linear infinite; } .swap { display: inline-grid; } .swap > * { grid-area: 1 / 1; } /* 基础样式就是最后一帧：Published 显示，Draft 不显示。 */ .draft { opacity: 0; animation: fc-draft 10s step-end infinite; } .live { animation: fc-live 10s step-end infinite; } .fc-body, .fc-body * { animation: none !important; } </style> Clip 还是交互式演示？ clip 是简化的模拟界面，所以它证明的东西不如真实产品多。用它来解释，用录屏来证明。 Stepshots 把你的真实产品录制成可点击的演示，你可以嵌入并跟踪。