HTML 轉 GIF，在瀏覽器裡逐格算繪

原理

三個步驟，全程在瀏覽器裡

工具接管頁面的時鐘，一次推進一格並逐格繪製，所以慢電腦和快電腦匯出的影片完全一樣。

1. <style>

   h1 { animation: rise 1.2s }

   @keyframes rise { … }

   </style>

   <h1>Hello</h1>

   HTMLanimation.html
   01

   貼上程式碼，或拖入檔案

   含 CSS 和 JavaScript 的完整頁面、一個 .html 檔案，或含圖片和字型的 .zip 匯出檔。來自 CDN 的函式庫照常載入。

2. 16:9

   9:16

   1:1

   ⏱ 4.5 s · auto
   02

   選擇格式和尺寸

   MP4、GIF、WebM 或單格 PNG；16:9、9:16 或 1:1；720p 到 4K，24、30 或 60 fps。動畫有終點時，長度會自動設定。

3. 142 / 180

   →

   MP4GIF60 fps
   03

   算繪並下載

   每一格都在本機繪製和編碼，完成後即可下載。不跳出螢幕分享提示，不上傳。

做出小而清晰的 GIF

• 盡量簡短

  2 到 6 秒就夠了；GIF 的檔案大小會隨格數一起增加。

• 只循環一個週期

  把長度設為動畫的一個完整週期，循環銜接處就不會跳動。

• 15 fps、480p

  預設值適合大多數文件和聊天；快速動作用 25 fps，需要細節用 720p。

• 純色效果最好

  GIF 每格只有 256 種顏色，大面積漸層和照片會出現色帶。這類內容用 MP4 更小也更清晰。