把 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 場景在較慢的電腦上可能會失敗。