精妙無比 8款HTML5動畫實例及源碼
新的一周開始了，我們分享 HTML5 和 CSS3 的工作也將繼續前行。今天要給大家帶來 8 款精妙無比的 HTML5 動畫實例，每一個動畫演示都有源代碼提供下載，非常方便大家學習 HTML5 的相關知識，一起來看看吧。
1、基于 HTML5 Canvas 的圖表插件 Chart.js
chart.js 是一款基于 HTML5 Canvas 的圖表插件，chart.js 的功能非常強大，它不僅提供了常見的柱形圖、折線圖、餅狀圖，而且還提供了環形圖、雷達圖，樣式外觀多樣，圖表的色彩搭配也比較清新。chart.js 還有一個特點就是圖表在初始化的時候有彈性動畫特效，這也是 HTML5 Canvas 的一大功勞。
2、HTML5/CSS3 圖片網格動畫特效
HTML5 技術可以讓網頁上的圖片變得非常神奇，各種各樣的 HTML5 圖片動畫特效讓你眼花繚亂。今天要分享的這款 HTML5 圖片網格動畫特效就非常炫酷。圖片縮略圖按網格的布局一行行排列，你只需點擊按鈕即可讓這些圖片出現不可思議的動畫效果，值得一看。
3、SVG HTML5 可愛的小鳥卡通動畫
今天我們再來分享一款用 HTML5 和 SVG 相結合的動畫特效，它是一只非常可愛的卡通小鳥，非常不錯的是，這只 HTML5 小鳥不僅外觀呈現 3D 立體，而且還會拍動翅膀和在空中浮動，真實妙極了。之前我們也用 CSS3 來制作過很多動物特效，非常不錯。
4、HTML5 Canvas 煙花動畫可控制煙花速度和大小
這款 HTML5 煙花動畫我們應該比較熟悉，因為之前有分享過類似的 HTML5 動畫了。這個 HTML5 煙花動畫是基于 canvas 的，可以說是之前分享那款的升級版，它可以控制煙花上升的速度和煙花綻放花朵的大小。由于是在 HTML5 Canvas 畫布上完成，因此也就非常靈活。
5、HTML5 Canvas 3D 折線圖表應用
今天我們再來討論一下關于 HTML5 圖表應用的問題，這款 HTML5 圖表是基于 canvas 的 3D 折線圖表，圖表在初始化的時候會根據數據點把折線分割成多條線段，然后線段將逐漸懸浮到數據點對應數值的位置。由于是 3D 的效果，所以圖表的折線也和其他折線圖表的不同。
6、jQuery/CSS3 書本翻頁動畫特效多功能選項支持
這是一款基于 jQuery 和 CSS3 的書本翻頁動畫特效，該書本翻頁插件的外觀非常華麗喜慶，非常適合產品活動或者育兒網站使用。我們可以點擊左右翻頁按鈕進行翻頁，也可以使用鼠標拖拽頁腳來實現翻頁動畫。這是個 jQuery 插件，因此兼容性還不錯。
7、CSS3 3D 環形進度條帶進度百分比
這是一款基于純 CSS3 的環形進度條，而且，從外觀上看，這款進度條很有 3D 立體的感覺，尤其是在進度條上有立體的投影，顯得非常小巧迷人。另外，進度條的環形中央帶有進度百分比，可以實時根據進度來更新百分比的數值。
8、、HTML5 3D 動畫柱狀圖表
這次我們要分享一款很酷的 HTML5 3D 圖表應用，它是一款柱狀圖表，呈 3D 的外觀樣式，并且我們可以改變圖表的顏色主題，讓其更加符合你的需求。這款 HTML5 圖表可以切換需要查看的圖表數據，在切換的時候有不錯的動畫效果，而且，我們還可以切換圖表的大小，以適應不同大小的瀏覽窗口。
以上就是 8 款非常精妙的 HTML5 和 CSS3 動畫實例演示，歡迎收藏分享。
<span id="shareA4" class="fl">
</span>