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

原理

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

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

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

   算繪並下載

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

支援範圍

瀏覽器能動起來的，都能轉

只要能在瀏覽器分頁裡動起來，就能變成影片：工具會控制 CSS、Web Animations API、計時器和 requestAnimationFrame 的時間，而所有動畫函式庫都建立在這些之上。

• CSS 動畫與轉場

  關鍵影格、轉場、@property 和濾鏡，時間與程式碼完全一致。

• GSAP 與 anime.js

  支援從 CDN 載入的時間軸和補間動畫；GSAP 時間軸的長度會自動偵測。

• SVG 動畫

  以 stroke-dashoffset 製作的線條描繪、變形和漸層動畫。

• Canvas 繪圖

  由 requestAnimationFrame 驅動的 2D 畫布繪圖和粒子系統。

• Three.js 與 WebGL

  3D 場景和著色器，逐格算繪，任意尺寸。

• p5.js 創意程式設計

  生成藝術草圖和創意程式設計作品，匯出不掉格。

• Tailwind 與介面模型

  用 class、計時器和 Web Animations API 製作動畫的產品首屏和 App 畫面。

• AI 產生的頁面

  Claude、ChatGPT 或 Gemini 寫成單一 HTML 檔案的動畫、解說和圖表。

格式

貼上一次，匯出所有格式

依用途選擇檔案格式。同一個頁面可以算繪成任何格式，三種畫幅都支援。

• MP4

  H.264 · 720p、1080p、4K · 24/30/60 fps

  適合社群貼文、簡報和影片剪輯軟體，到處都能播放。

• GIF 動圖

  360p 到 720p · 10/15/25 fps · 循環播放

  適合 README、Slack 訊息、電子郵件和文件。

• 透明 WebM

  VP9 含 Alpha 色版 · 720p 到 4K

  去掉頁面背景，作為疊加層用於 Premiere、DaVinci Resolve、Final Cut 或 CapCut。

• PNG 靜態畫面

  1080p 或 4K · 任意時間點 · 可透明

  把某一格存成靜態圖：海報、縮圖或簡報配圖。

用途

這些動畫會用在哪裡

• 社群

  貼文和限時動態

  16:9 用於 X 和 LinkedIn，9:16 用於 TikTok、Reels 和 Shorts，1:1 用於動態牆。平台只收影片，不收 HTML。

• 簡報

  PowerPoint、Keynote 和 Google Slides

  簡報能播放 MP4 或 GIF，卻播放不了 HTML 動畫。

• 剪輯

  影片剪輯裡的標題和疊加層

  把字幕條或 Logo 動畫匯出成透明 WebM，直接疊在素材上。

• 文件

  README 和文件

  元件或圖表的 GIF，放在讀者正在看的地方。

• 作品集

  Dribbble、Behance 和案例展示

  把 CodePen 或自己專案裡的動態作品匯出成乾淨、清晰的影片。

• 產品

  發表和展示

  用 HTML 做的產品首屏或 App 畫面動畫，匯出成發表貼文裡的短片。

來自 AI 對話

把 Claude、ChatGPT 或 Gemini 產生的動畫轉成影片

1. 01

   要一個 HTML 檔案

   請 AI 產生「一個內含 CSS 和 JavaScript 的獨立 HTML 檔案」，並填滿視窗。說明想要的長度，讓動畫有明確的終點。

2. 02

   複製程式碼，或下載檔案

   從對話中複製整個頁面，或下載 .html 檔案。如果工具匯出的是資料夾或 .zip（Claude Design 就是這樣），保留 .zip 即可。

3. 03

   貼上或拖入，然後算繪

   預覽會播放動畫；選擇 MP4、GIF 或 WebM 後算繪。需要修改時，請 AI 改好，貼上新版本，再算繪一次。

為什麼逐格算繪

任何電腦都流暢，而且保有隱私

螢幕錄影只能留下電腦當下顯示出來的畫面，掉格也一併留下。這裡頁面的時間會停住，直到每一格畫完。

• 逐格精確

  每一格都在各自的時間點繪製，60 fps 就是每秒 60 張不同的畫面，慢電腦也一樣。

• 不上傳任何內容

  頁面在瀏覽器的沙盒框架中執行，檔案也在本機編碼。程式碼不會傳到任何伺服器。

• 免費，無浮水印

  不需要帳號，沒有點數，影片上沒有 Logo。

HTML 轉影片的幾種方式

下一步

更進一步