1、HTML5 SVG 3D蝴蝶飛舞動畫 逼真超酷
這次我們要分享的這款HTML5動畫簡直就是逆天，利用SVG製作的3D蝴蝶飛舞動畫，蝴蝶飛舞動畫非常逼真，蝴蝶飛舞的路線是利用SVG構造的。另外，動畫使用了一張立體感很強的天空背景圖，讓蝴蝶飛舞時更加顯得立體逼真。
2、一組HTML5 SVG可愛的笑臉動畫
今天我們來分享一組利用HTML5和SVG實現的可愛笑臉動畫，它們是色彩各異的一組泥娃娃的臉，預設的時候就出現眨眼和微笑的動畫，當你把滑鼠滑過它們時，就像是感受到了主人的撫摸一樣上下跳動起來，真的是非常可愛。
3、HTML5 SVG圓盤時鐘動畫 5種時鐘樣式
今天我們要來分享一款基於HTML5和SVG的圓盤時鐘動畫，首先，圓盤時鐘的時間是和你的本地時間同步的，因此，你完全可以用它來看上網時間。另外，這款HTML5圓盤時鐘提供了5中不同的盤面樣式，有帶刻度的和不帶刻度的，還挺實用的。
4、一套HTML5/SVG表情圖示 表情超可愛
這次我們要來向大家分享一款超級可愛的HTML5/SVG表情圖示，一共有12組不同的表情，這些表情都是利用SVG Path繪製而成，對SVG熟悉的朋友應該覺得比較簡單，但是這些表情的創意確實非常不錯，你可以將這些svg表情應用到你的部落格上去，非常可愛。
5、HTML5 SVG小馬奔跑動畫 相當大氣
今天我要來向大家分享一款超級酷的HTML5動畫，它是一隻快速奔跑的狐狸，奔跑的動作非常自然逼真，長長的狐狸尾巴也會隨著擺動。另外，這款HTML5狐狸奔跑動畫也是基於SVG的，前面我們也介紹過很多哦SVG的動畫效果，可見SVG在動畫製作上也有很大的優勢。
6、HTML5 SVG多折線圖表 圖表可縮放顯示
今天我們要來介紹一款基於HTML5 SVG的折線圖表，該款圖片支援多條折線重疊在一起顯示，可以方便地比較不同顏色折線的資料。另外圖表還有一個特點，就是可以縮放和移動，這大大方便了使用者瀏覽圖表資料，非常人性化。更多圖表應用，請移步至HTML5圖表欄目。
7、CSS3/SVG質感背景小圖示 鏤空效果圖示按鈕
之前我們分享過很多利用CSS3製作的圖示小按鈕，比如一些分享按鈕，如純CSS3社會化分享按鈕，還有一些帶小圖示的CSS3選單，如HTML5/CSS3滑塊動畫選單圖示動畫很酷。今天我們來分享一款用CSS3和SVG實現的質感背景小圖示，滑鼠滑過圖示時出現鏤空的效果，並且有質感背景的描邊，效果非常不錯。
8、HTML5 SVG Tab滑塊選單 非常酷的Tab選單
之前我們分享過很多HTML5/CSS3選單，應該說大部分都還比較實用華麗，今天我們要來分享另外一種形式的HTML5選單——HTML5 Tab選單。這款Tab選單是利用HTML5和SVG實現的，Tab選單的外觀非常漂亮，而且Tab切換也很方便。
9、HTML5/SVG實現隨風搖擺的動畫樹
今天的這款HTML5動畫非常有特點，它是一棵隨風搖動的樹，但是這棵樹是模擬出來的，外觀並不是那麼逼真，只是樹的骨架出來了。樹的結構由SVG描述而成，之前我們也介紹過過許多關於SVG的動畫特效，比如HTML5 SVG多折線圖表。
10、HTML5/SVG線性圖表 可繪製圖表區域顏色
今天要分享的這款HTML5圖表應用是一款線性圖表，它主要是有SVG構造出來的，這款SVG線性圖表可以用不同的顏色繪製出圖表的資料區域。另外，這款圖表和之前分享的HTML5線性圖表iGrapher 類似，只是功能沒那麼強大而已。
11、HTML5/SVG實現過山車動畫
今天我們要分享一款很酷的HTML5/SVG動畫，這款HTML5動畫是過山車效果，主要是利用了SVG的path動畫來實現的，效果非常酷。另外，關於更多SVG方面的動畫，大家可以看看這款HTML5 SVG狐狸奔跑動畫、HTML5/SVG實現隨風搖擺的動畫樹，也都非常不錯。
12、HTML5 SVG仿iPhone拍照快門效果
這是一款很酷的拍照快門特效，它利用了HTML5和SVG的特性仿製了類似iPhone拍照應用的快門效果。該HTML5快門的外觀非常漂亮，邊線有六種不同的顏色組成，當按下快門時，就可以出現像iPhone拍照應用的那種效果了。
以上就是12款基於SVG的HTML5應用和動畫，歡迎收藏分享。
本文轉載自：CSDN