20 個很棒的 SVG 動畫示例

可縮放矢量圖形 (SVG) 是一種用 XML 編寫的圖像格式。 使用 SVG，您可以編寫二維可縮放圖形。 然後，您可以在 CSS 和 JavaScript 中實現和修改它們。

SVG 允許三種類型的圖形：矢量形狀（所有方向和形狀的直線和曲線）、圖像和文本。 由於其各種功能，網頁設計師轉向 SVG 來製作複雜的動畫。 它們易於安裝，在調整大小時不會降低質量，並且不需要任何第三方應用程序即可工作。

由於動畫仍然越來越受歡迎，大多數人並不熟悉它們。 本文將重點介紹 20 個出色的 SVG 動畫，這些動畫展示了這種格式的潛力。

1. kittons的醫療SVG圖標

這種溫暖流暢的動畫非常適合任何與健康相關的網站。 當您列出不同的線程時，圖像會巧妙地出現。 救護車或原子會製造，眼睛會睜開，醫生會跳出來。 該動畫展示了 SVG 的所有樂趣和活力。

關聯

2. SeanMcCaffery 懸停

您可以將其放到任何交互式網站上的通用動畫。 當您懸停時，邊框的微妙外觀讓您感到滿意，並邀請您單擊鏈接。

關聯

3. Nikolay Talanov 下拉刷新（紙飛機）

通常，當您“下拉”頁面時，頁面會刷新。 這個動畫把它帶到了一個新的水平。 當您向下拉釋放它時，您將向天空發射一架紙飛機。 如果您希望訪問者經常刷新您的應用程序，您應該考慮添加這樣的動畫。

4. 繼續前進 Diaco M. Lotfollahi

顯示縮放矢量潛力的 SVG 動畫。 人體流暢準確的動作令人著迷。

關聯

5. HTML5 視頻中添加了 SVG 過濾器

來自 Google Chrome 團隊的 Paul Irish 研究了 SVG 如何修改矢量圖形之外的內容。 他結合 CSS 和 SVG 製作了令人驚嘆的視覺過濾器，以表明 SVG 動畫可以成為現成視頻的一個很好的補充。

關聯

6. 拼圖

您可以使用 SVG 動畫製作令人驚嘆的交互式拼圖遊戲。 在這個例子中，我們可以選擇許多圖片中的一張，看看它是如何分解成許多小塊拼圖的。 你也可以重建它！

關聯

7. Patrick Young的線性漸變

如果你喜歡霓虹燈和漂亮的字體，你會喜歡這個動畫。 這項工作展示了您如何不需要任何移動線條來製作出色的動畫，只需要出色的字體和具有漸變效果的適當顏色代碼。

關聯

8. 讓我們旅行 jjperezaguinaga

兩架飛機和一個熱氣球圍繞著世界著名的地標旋轉。 這部動畫色彩鮮豔、樂觀、令人興奮。 它展示瞭如果您精通 SVG，您可以做的所有事情。

關聯

9. Mohamad Mohebifar 的時鐘

顯示當前時間的移動時鐘的簡單 SVG 動畫。 指針的舒緩運動和簡約的設計為這個動畫創造了奇蹟。

關聯

10. Luigi De Rosa 的動畫圖標

如果您將鼠標懸停在這些圖標上，您將觸發動畫，這些動畫簡單但有效。 您可以看到，您不必創造奇蹟就可以製作出令人印象深刻的動畫圖標。

11. Chris Gannon 的 SVG 中的所有設備

一個一次性動畫，以最具創意的方式遍歷我們使用的所有智能設備。 台式機將變成筆記本電腦，筆記本電腦變成平板電腦，然後變成智能手機。

關聯

12. 克里斯·甘農的瀑布

Chris Gannon 的另一個作品，這是對泡沫瀑布底部的巧妙演示。 水的運動很整齊，你可以看到飛濺的小水滴離開動畫的邊界，讓一切看起來更逼真。

關聯

13. Blake Bowen 的植物生成器

現在這個是另一回事。 當您單擊“創建”按鈕時，您會看到植物正在生長和生長。 但是每次點擊，都會形成不同的圖案。

關聯

14. Hamish Williams 的可點擊圖標

另一個交互式 SVG，一旦您單擊它就會觸發動畫。 一旦您單擊它，它將啟動“發送”動畫。

關聯

15. Marco Barría 的新蛋糕

有趣的動畫，逐層展示蛋糕的製作過程。 這是一個令人印象深刻的 SVG 動畫，適用於生日賀卡。

16. Chris Gannon 的碎紙機

如果你喜歡看碎紙，你會喜歡這部動畫，它描繪了一台機器以無縫的順序無限次地撕紙。

關聯

17. GREYGHOST 的 Low PolyLion

這是一個令人興奮的插圖和動畫，描繪了獅子頭以動畫多邊形的形式出現和消失。

關聯

18. Leela 的沙漏裝載機

另一個僅使用 SVG 的有效動畫。 每 5 秒，沙漏就會倒轉並開始一個新的循環。

關聯

19. 響應牛莎拉·德拉斯納

這是一個有趣的互動動畫，它允許你點擊一頭牛並將它拖到月球上，而一個困惑的宇航員看著它。

20. Domany的學生

一個熱心的學生似乎準備好學習了！ 這是一個很棒的動畫，書頁整齊地翻動。 學生沒有眨眼，但這仍然是一個非常整潔的動畫來結束這個列表。

關聯

到你了

您最喜歡的未包含在此列表中的 SVG 動畫有哪些？ 在下面的評論中分享您的選擇！