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