18個超有趣的SVG繪製動畫賞析

SVG做爲時下比較新穎的技術標準，已經創建了不少基於SVG的前端項目。因爲SVG在繪製路徑上很是靈活，咱們將不少網頁上的元素使用SVG來繪製而成，有各類人物、小圖標、小動畫等等。今天咱們收集了18個很是新奇有趣的SVG繪製動畫，這些動畫大部分都是使用SVG結合必定的CSS3特性實現而成，效果讓人大爲震撼，一塊兒來看看吧。

一、HTML5 SVG實現會跳舞的花朵 4種跳舞心情

這又是一款頗有趣的HTML5 SVG動畫，它是一朵會跳舞的花。首先，花朵和花盆均採用SVG進行繪製，雖然是簡單的線條以及單純的顏色，可是繪製出的效果仍是至關逼真的。接下來是給花朵進行跳舞動畫的渲染，結合CSS3的動畫屬性以及JavaScript的動態渲染，讓這朵花賦予了4種不一樣心情下的跳舞動畫，點擊按鈕便可切換當前心情下的跳舞動畫，真的是很是可愛。

在線演示   源碼下載

二、jQuery SVG高端圓形菜單導航

這是一款很是富有創意的jQuery菜單導航插件，菜單項的小圖標是使用SVG路徑繪製而成，簡單實用。同時每個菜單項排列成一個圓圈，菜單項切換時，中間的圓圈也會隨着移動，並且中間的大圓圈中會顯示對應菜單項的描述和連接按鈕。

在線演示   源碼下載

三、HTML5 SVG天氣預報動畫卡片 可模擬多種天氣

以前咱們介紹過一些關於天氣預報的各類應用和插件，有天氣預報動畫圖標，好比CSS3天氣預報動畫圖標。今天咱們要分享一款基於HTML5和SVG的天氣預報動畫卡片，咱們能夠點擊卡片中的天氣情況按鈕，便可模擬對應的天氣動畫，動畫模擬了下雨、下雪、雷陣雨、颳風、晴天這些動畫特效。

在線演示   源碼下載

四、HTML5 SVG實現可愛的小狗和狐狸動畫

今天咱們要給你們分享一款基於HTML5和SVG的動畫動畫，是一隻可愛的小狗和一隻漂亮的狐狸。咱們用SVG繪製了他們的外形，而且經過HTML5腳本控制它們的輪廓在實現各類表情的切換。好比小狗會搖尾巴、吐舌頭等，小狐狸能夠行走，畫面很是可愛。

在線演示   源碼下載

五、HTML5 SVG實現老爺爺拄柺杖行走動畫

這是一款基於HTML5和SVG的人物行走動畫，圖中使用SVG繪製出了一個拄着柺杖的老爺爺，描繪的活靈活現，可見目前SVG對繪圖方面支持得也十分完美。另外咱們又使用HTML5技術讓這個老爺爺可以拄着柺杖一步步行走，這和以前咱們分享的CSS3人物行走動畫很是相似，怎麼樣，是否是很酷？

在線演示   源碼下載

六、SVG/CSS3實現按鈕點擊波紋動畫

以前對於按鈕動畫，咱們分享過不少基於jQuery和CSS3的鼠標滑過按鈕動畫，有滑事後發光的，也有波紋的，都很是不錯。此次咱們要分享的是一款基於CSS3和SVG的波紋按鈕動畫，鼠標點擊按鈕時，按鈕上將會出項各類形狀的波紋特效，一共有4組波紋動畫效果。

在線演示1 在線演示2 在線演示3 在線演示4 源碼下載

七、CSS3/SVG繪製的悉尼歌劇院

這是一款基於純CSS和SVG實現的歌劇院建築，CSS3的強大和SVG的靈活打造了這個用不一樣線條勾勒的悉尼歌劇院，另外還有海面和天空中的太陽和白雲也描繪的活靈活現，在網頁繪製方面，除了炫酷的Canvas外，SVG也是不錯的選擇。

在線演示   源碼下載

八、SVG實現吸血蝙蝠變身動畫

今天咱們要分享一款基於SVG的炫酷動畫，它是一隻能夠變身爲吸血殭屍的吸血蝙蝠。首先咱們利用SVG的路徑繪製了一隻會扇動翅膀的蝙蝠，而且蝙蝠在飛行的過程當中還有陰影，這樣更顯得具備真實感。而後隨便在頁面空白地方點擊鼠標，飛行的吸血蝙蝠立馬搖身一變，變成了一隻惡魔般的吸血殭屍，這中間咱們僅僅是對SVG的路徑進行了切換而已。

在線演示   源碼下載

九、4 組有趣的 HTML5 SVG 文字播放動畫

關於文字動畫，咱們以前介紹過很多基於jQuery和CSS3的文字特效，好比HTML5/CSS3 3D文字外翻效果和HTML5/CSS3發光文字 可自定義文字色彩。今天要來分享4組有趣的HTML5 SVG 文字播放動畫，利用SVG的路徑描繪特性，文字的外觀頗有個性，同時點擊按鈕便可讓文字經過各類動畫展示在屏幕上，動畫特效很是酷。

在線演示   源碼下載

十、HTML5 SVG 世界地圖旋轉動畫

這是一個以世界地圖爲背景的簡易地球儀，經過HTML5和SVG的相關特性，實現了這個世界地圖地球儀的旋轉動畫。地圖旋轉期間，會有飛機在地圖上自由飛行，這樣讓這個動畫更加逼真。與此相關的另一個HTML5 Canvas 地球旋轉3D動畫也是很是的不錯。

在線演示   源碼下載

十一、SVG圖片波浪效果渲染動畫

今天咱們要爲你們分享一款很酷的SVG圖片動畫，主要是圖片上會出現波浪的渲染動畫。實現原理是在圖片上方利用SVG路徑繪製了一層蒙板，而後蒙版進行必定的隨機扭曲就造成了圖片上方波浪翻滾的動畫特效，並且也十分逼真。

在線演示   源碼下載

十二、基於HTML5和SVG的手機菜單動畫

以前咱們分享過不少手機端的jQuery菜單和CSS3菜單，也有不少是PC端的菜單，都很是不錯。今天要接着分享一款基於HTML5和SVG的手機端菜單動畫，這款菜單有2種主題和動畫風格，分別是側邊飛入和底部飛入動畫，同時點擊菜單展開按鈕又會出現旋轉的動畫特效。

在線演示   源碼下載

1三、純CSS3藍色蝴蝶動畫

以前咱們分享過幾個漂亮的HTML5蝴蝶飛舞動畫，好比超炫酷HTML5 Canvas蝴蝶飛舞動畫和HTML5 SVG 3D蝴蝶飛舞動畫都很是炫酷。今天要分享的這款蝴蝶動畫是基於純CSS3的，雖然沒有前面蝴蝶動畫那麼絢麗，可是藍色的蝴蝶翅膀扇動起來也是別有一番風味的。

在線演示   源碼下載

1四、SVG邊框可連續變化的鼠標滑過動畫按鈕

今天咱們要給你們分享一款基於SVG的鼠標滑過動畫按鈕，這款按鈕的鼠標滑過動畫呈現的是按鈕邊框線條可連續變化，很是絢麗。像這樣的鼠標滑過按鈕在以前咱們也分享過不少，你們能夠回顧一下純CSS3鼠標滑過按鈕動畫 多種動畫風格和jQuery/CSS3多種鼠標滑過動畫按鈕集合，也許其中有些按鈕效果能夠用得上。

在線演示   源碼下載

1五、超炫酷HTML5 Canvas蝴蝶飛舞動畫

還記得很早之前咱們爲你們分享過一款很是炫酷的HTML5蝴蝶3D動畫，它是基於HTML5和SVG實現的。此次咱們要再一次爲你們介紹另一款一樣也很酷的HTML5 Canvas蝴蝶飛舞動畫，蝴蝶是在Canvas上繪製而成，利用HTML5的動畫特性實現蝴蝶的飛舞，你們能夠學習一下。

在線演示   源碼下載

1六、HTML5 SVG 繪製唐老鴨卡通形象

利用CSS3能夠繪製不少人物和動物形象，好比以前介紹的純CSS3繪製可愛小男孩動畫和純CSS3繪製可愛的蚱蜢，可見CSS3十分強大。此次咱們要介紹的是利用HTML5和SVG來繪製的唐老鴨卡通形象，SVG的path特性很是靈活，可讓你繪製任何路徑。

在線演示   源碼下載

1七、CSS3/SVG實現鼠標滑過3D展開文字描述圖層

如今不少HTML5動畫都會結合SVG來製做，由於SVG能夠更方面地描述界面圖形元素。今天要介紹的一款動畫就是利用CSS3結合SVG實現的，它可讓咱們在鼠標滑過圖片時，經過3D立體的視覺效果展現文字描述圖層，動畫效果很是絢麗。

在線演示   源碼下載

1八、CSS3/SVG沙漏式Loading加載動畫

以前咱們也已經分享過不少Loading動畫和進度條動畫了，不少都是比較實用的應用。今天咱們要再來分享一款基於CSS3和SVG的沙漏式Loading加載動畫，儘管實現起來也比較簡單，可是模擬效果至關逼真，適合來作整個頁面加載時的等待動畫。

在線演示   源碼下載

以上就是18個超有趣的SVG繪製動畫，怎麼樣是否是很過癮？小夥伴若是喜歡前端，喜歡SVG，喜歡HTML5，那麼就請收藏此文吧。