把 HTML 动画转成 GIF

适合 README、Pull Request、文档、聊天，以及一切放不了视频的地方。粘贴代码，选好尺寸，下载 GIF。

或者从示例开始：

代码要找 AI 写？

预览

粘贴代码后，动画会立即在这里播放。

渲染期间请让此标签页保持在前台。

下载
格式
画幅
秒

在你的设备上运行，文件不会被上传。

让 AI 直接写出可导出的版本

把这段话附在你的需求后面，或连同已有的代码一起发给 AI。这样得到的结果一次就能正常渲染。

三个步骤
  1. 1
    粘贴
    粘贴 HTML，或拖入 .html、.zip 文件。预览会立即开始。
  2. 2
    检查
    按发布的地方选择画幅。时长会从动画中读取，也可以自行修改。
  3. 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 的体积涨得很快。放在 README 或聊天消息里，480p、3 到 8 秒通常比较合适。
循环首尾相接
循环动画会被精确裁成一个周期，GIF 重复播放时不会跳帧。
纯色效果最好
GIF 每帧只能容纳 256 种颜色。纯色图形和文字能保持清晰，柔和的渐变和照片会出现色带。
更看重画质？
用同一份代码导出 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 场景在较慢的电脑上可能失败。