AI 写好了动画，把它导出成视频

ChatGPT、Claude 和 Gemini 给的是代码，可社交平台、幻灯片和剪辑软件要的是视频文件。把代码粘贴到这里，下载视频。

或者从示例开始：

代码要找 AI 写？

预览

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

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

下载
格式
画幅
秒

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

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

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

从对话到视频
  1. 1
    让 AI 给出一个 HTML 文件
    告诉助手要做什么动画，并要求只给一个 HTML 文件。附上下方的提示词，得到的结果就可以直接导出。
  2. 2
    复制代码
    在 ChatGPT、Claude 或 Gemini 里，点击代码块上的复制按钮。如果助手显示的是实时预览，请先切换到代码视图。
  3. 3
    粘贴并导出
    粘贴到本页顶部，按平台选择画幅（Reels、Shorts 和 TikTok 用 9:16，YouTube 和幻灯片用 16:9），然后导出。
让 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。
为什么不录屏，或者用命令行工具？
录屏会卡顿，会录进鼠标指针，尺寸也不对。命令行工具结果精确，但需要安装 Node、无头浏览器和 FFmpeg。本页做的是同样的逐帧渲染，却什么都不用安装。
能渲染什么
  • 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 场景在较慢的电脑上可能失败。