越短越好
GIF 体积涨得很快。放进 README 或聊天消息，480p、3 到 8 秒一般就够了。
三步完成
- 1
粘贴
粘贴 HTML，或者拖入 .html、.zip 文件，预览马上开始。
- 2
检查
按要发布的平台选画幅。时长会自动从动画里读出来，也可以自己改。
- 3
导出
选 MP4、GIF、透明 WebM 或 PNG 单帧，然后下载文件。
让 AI 直接写出能导出的版本
把这段话加在你的需求后面，或者和现有代码一起发给 AI。这样拿到的代码最有可能一次就渲染成功。
请把这个动画改写成一个自包含的 HTML 文件，我要用 htmlto.video 把它导出成视频： - 按 16:9 的画幅设计。画面要正好铺满浏览器窗口（100vw × 100vh，不出现滚动条）。所有尺寸都用 vw 和 vh，这样任何分辨率都能适配。 - 页面加载后自动开始播放，不需要点击、按键或滚动。 - 时长固定，并在第一行用注释写明，例如 <!-- duration: 8s -->。 - 动画用 CSS 动画、Web Animations API、GSAP，或者基于时间戳参数的 requestAnimationFrame 来实现。不要用 video、audio 或 iframe。 - 所有 CSS 和 JavaScript 都写在这个 HTML 文件里。图片用内联 SVG 或 data URL 嵌入。字体和库只从允许跨域加载的 CDN 引入，例如 Google Fonts、cdnjs 或 jsDelivr。 - 把完整的 HTML 放在一个代码块里回复。
做出好 GIF 的几个要点
首尾无缝循环
循环动画会被精确裁成一个周期，GIF 反复播放时不会跳一下。
纯色效果最好
GIF 每帧最多 256 种颜色。纯色图形和文字很清晰，柔和的渐变和照片会出现色带。
更在意画质？
用同一份代码导出 MP4。只要对方能接受视频，MP4 更清晰，文件也小得多。
能渲染什么
- CSS 动画和过渡
- GSAP、anime.js、Motion 等 JavaScript 动画库
- Canvas 2D
- 用 CSS 或 JavaScript 驱动的 SVG 动画
- WebGL 和 Three.js
- Web Animations API 和 requestAnimationFrame
暂时还做不到的
- Safari、iPhone 和 iPad 不能导出，但可以预览。
- 页面里的视频、音频和 iframe 不会出现在导出结果里。
- 服务器不允许跨域读取的图片和字体会缺失。
- 要点击、悬停或滚动才会触发的动画不会播放。
- 用 <animate> 等 SMIL 标签做的 SVG 动画录不下来。
- 特别重的 WebGL 场景在较慢的电脑上可能会失败。