讓海報動起來：用 AI 寫 HTML + CSS 做 10 種動態效果的方法
描線 Logo、翻頁、浮動、打字機等效果，不用 After Effects：給 AI 參考圖、說清楚開始中間結尾三個狀態，請它寫 HTML + CSS，錄影就能做成 Reel。
在 Instagram 看這支 Reels留言關鍵字 #動態 就會收到這篇
Reels 裡 10 個會動的效果，全部是 HTML + CSS 寫出來的，沒有開 After Effects。方法很簡單：把靜態設計給 AI，說清楚你要它怎麼動，請它寫程式碼。
這篇講怎麼描述效果、萬用提示詞怎麼填、做好之後怎麼變成影片。
01為什麼用 HTML + CSS 做動態
- 不用買軟體：任何瀏覽器都能播，一個 .html 檔就是成品。
- 改得快：想要慢一點、顏色換一下，改一個數字就好。
- AI 很會寫：CSS 動畫是網頁的標準功能，AI 寫出來幾乎不會錯。
- 能重複用：同一段程式換掉圖片，就是下一張海報的動態版。
023 步驟
- 選一個效果，例如「描線 Logo」或「翻頁」。一次只做一個效果，不要混。
- 給 AI 看參考圖（你的海報、Logo 或照片），然後說清楚三個狀態：開始的靜止畫面、中間怎麼動、結尾停在哪裡。
- 請它寫 HTML + CSS。看了不滿意，一次只改一個地方（「慢一點」「顏色改成 #E8431F」），一輪一輪修。
03萬用提示詞
把 [ ] 裡的內容換成你的，貼給 ChatGPT 或 Claude。圖片用上傳的方式附上。
幫我用 HTML + CSS 做一個 3 秒循環動畫：[效果名]。 素材：[你的海報／Logo／照片] 開始：[靜止畫面] 中間：[怎麼動] 結尾：[停在哪裡] 尺寸 1080×1350，不要用外部 library。
填好的例子：
幫我用 HTML + CSS 做一個 3 秒循環動畫：描線 Logo。 素材：我上傳的 SVG Logo。 開始：畫面只有米白色底，Logo 看不見。 中間：Logo 的線條像用筆畫一樣，從左到右逐段畫出來，1.8 秒畫完。 結尾：線條畫完後填上黑色，停 1 秒，再淡出重來。 尺寸 1080×1350，不要用外部 library。
0410 種效果怎麼描述
描述效果時，用這些說法 AI 最聽得懂：
- 描線：「線條從起點逐段畫出來」（AI 會用 SVG 的 stroke-dasharray）。
- 翻頁：「像翻書一樣沿著左邊翻過去，露出下一頁」。
- 浮動：「上下輕輕漂浮 10 px，像在水面上」。
- 打字機：「文字一個字一個字出現，最後游標閃爍」。
- 放大進場：「從 80% 放大到 100%，同時從透明變實」。
- 滑入：「從右邊畫面外滑進來，停在中間」。
- 色塊揭露：「一個色塊從左掃到右，掃過的地方露出圖片」。
- 旋轉：「順時針慢慢轉一圈，10 秒一圈」。
- 跳動：「每 0.5 秒輕輕彈一下，像心跳」。
- 漸層流動：「背景的漸層慢慢往右移動，看起來像在呼吸」。
05做好之後：錄下來變成影片
- 把 AI 給的程式碼存成 .html 檔，用瀏覽器打開。
- 按 F11 全螢幕，用螢幕錄影（Mac：Shift + Cmd + 5；Windows：Win + G 或 Win + Alt + R）錄 10 到 15 秒。
- 剪輯軟體裡裁成 4:5 或 9:16，就可以當 Reel 或放進作品集。
- 同一段程式換圖片，就是下一支。