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