用 Claude Code 做 SVG 動畫：Logo、Loading 一次搞定

網站做好了，看起來卻有點靜？這篇用一句話幫它加上兩個會動的東西：導覽列左邊一條小蛇爬進來吃掉紅點的 Logo，和網頁打開時三個方塊跳動的 Loading。不用會畫圖、也不用學動畫軟體，重點只有一個：把動畫說清楚。

快速回答 在有 index.html 的網站資料夾啟動 Claude Code，描述動畫時說清楚四件事：畫面裡有什麼、從哪裡動到哪裡、整段幾秒、播一次還是一直循環。它會寫成 SVG 檔或 CSS 動畫，直接放進網站。2026-10-21 用 Claude Code 2.1.305 實測，做 Logo 花 49 秒、Loading 花 25 秒。它還提醒：Loading 還蓋著畫面時，Logo 就已經播完了；再一句話「等 Loading 消失後才播 Logo」就調好。

做完這篇，你會有

• 一個 logo.svg：小蛇從左邊爬進來、吃掉紅點後停住，放在網站導覽列
• 一個 Loading 動畫：網頁打開時三個方塊依序跳動，載入完就淡出
• 會描述動畫：畫面、動作、時間、次數

開始之前要準備：上一篇做的 my-site 資料夾。沒有的話，任何一個有 index.html 的網站資料夾都可以。

描述動畫的四件事

少了其中一件，它就只能自己猜。

步驟 1：一句話做出動畫 Logo

在 my-site 資料夾啟動 Claude Code，輸入：

幫我做一個會動的 SVG Logo，放在導覽列名字左邊：一條 4 格的深綠色小蛇從左邊爬進來，吃掉一顆紅點後停住。整段 1.5 秒，只播一次。存成 logo.svg

它把你說的 1.5 秒拆成三段，還自己加了一個「吞下去」的鼓起動作。

步驟 2：打開網頁看動畫

重新整理 index.html，看導覽列左上角。動畫只播一次，想再看就再重新整理。

下圖把 logo.svg 放大 10 倍，停在幾個時間點，讓你看清楚每一格：

如果動作和你想的不一樣，直接說哪裡不對，例如「不要鼓起來」「紅點換成黃色星星」。

步驟 3：再做一個 Loading 動畫

輸入：

再做一個 Loading 動畫：畫面中間三個深綠色方塊依序上下跳，一輪 0.9 秒、一直循環。網頁打開時先顯示它，內容載入完就淡出消失。

看最後「要注意的一點」：Logo 一打開網頁就開始播，如果 Loading 還沒消失，小蛇就在 Loading 後面爬完了，訪客看不到。

步驟 4：一句話微調

它已經想好解法，你只要答應，順便調整速度：

好，等 Loading 消失後再讓小蛇開始爬，而且爬慢一點，整段改成 2.5 秒

實測 Loading 在 0.4 秒淡出，之後小蛇才出現、開始爬。爬完停在名字左邊：

整個過程沒有用到動畫軟體或外部圖片：Logo 是一個 logo.svg，Loading 寫在 index.html、style.css 和 script.js 裡。

換你做

幫你的網站或自媒體做一個自己的小動畫，例如「作品卡片的標題下面畫一條線，從左到右畫出來」或「頁尾的愛心每 2 秒跳一下」。照上面那張表，四件事都說到。

常見卡關

• 看不到 Logo 在動：動畫只播一次，可能在你看之前就播完了。重新整理網頁，眼睛先盯著左上角。
• 動作和想的不一樣：通常是少說了一件事。補一句「從哪裡動到哪裡」或「播一次就停」再請它改。
• Loading 一直轉，不會消失：它等到圖片等內容都載入完才淡出。按 F12 打開瀏覽器的開發者工具，切到 Console（主控台，網頁的錯誤訊息會出現在這裡），把紅色的錯誤訊息貼給 Claude Code。
• 兩個動畫搶在同一時間播：說清楚先後順序，例如「A 結束後再播 B」。

你做到了

• 用一句話做出會動的 Logo，放進網站導覽列
• 做出網頁打開時的 Loading 動畫
• 用一句話調整動畫的先後和速度

常見問題

SVG 動畫是什麼？

SVG 是用文字寫成的圖片檔，放大也不會糊。動畫可以直接寫在檔案裡，瀏覽器打開就會動。這篇的 logo.svg 用瀏覽器直接打開也會播。

動畫要怎麼停？

在描述裡寫「只播一次」或「播完停住」。想一直動就寫「一直循環」。

可以用在別的網頁嗎？

可以。logo.svg 是一個獨立檔案，複製到別的網站資料夾，請 Claude Code 把它放進頁面就好。

下一步

• 一句話做出個人網站：Claude Code 新手作品集教學：還沒有網站，先做這篇。
• Claude Code 指令與快捷鍵懶人包：每天 10 個、進階 6 個、隱藏版 6 個：改壞了想退回上一版，用 /rewind。

參考資料

• MDN, SVG: Scalable Vector Graphics（SVG 是什麼、可以放大不失真） https://developer.mozilla.org/en-US/docs/Web/SVG
• MDN, Using CSS animations（動畫的時間、延遲、播放次數） https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations