轉載自：http://www.html5tricks.com/8-html5-pure-css3-animation.html
8個超震撼的HTML5和純CSS3動畫源碼
150 人浏覽 發表回複
HTML5和CSS3之是以強大，不僅因為現在大量的浏覽器的支援，更是因為它們已經越來越能滿足現代開發的需要。Flash在幾年之後肯定會消亡，那麼HTML5和CSS3将會替代Flash。今天我們要給大家分享8個最新的HTML5和純CSS3動畫及其源碼，這些動畫非常讓人震撼，你也可以學習一下HTML5源碼。
1、HTML5 Canvas水波紋動畫特效
HTML5的Canvas特性非常實用，我們不僅可以在Canvas畫布上繪制各種圖形，也可以制作絢麗的動畫，比如這次介紹的水波紋動畫特效。以前我們也分享過一款基于HTML5 WebGL的水波蕩漾動畫，讓人驚歎不已，這次分享的HTML5 Canvas水波紋動畫同樣非常震撼人心。
線上示範 源碼下載下傳
2、HTML5 Canvas人物四肢模拟及身體碰撞動畫
前幾天我們剛剛為大家分享過一款基于HTML5的人物四肢關節伸展模拟動畫，它可以模拟人物的頭部、四肢伸展情況，相當逼真。今天要介紹的這款HTML5 Canvas動畫在原來四肢模拟的基礎上，添加了身體碰撞模拟的動畫特效，我們用滑鼠模拟一個大鐵球，移動滑鼠後将大鐵球撞擊人物的身體，人物身體受到作用力後就會按一定方向進行翻轉活動，是以四肢也随着伸展和擺動。當然這種動畫也應用了HTML5的重力感應特性。這種類似的動畫以前也介紹過一些，比如HTML5圖檔相冊重力感應特效。
線上示範 源碼下載下傳
3、HTML5點陣列局部放大鏡動畫特效
記得以前我們分享過一款很酷的HTML5 3D 粒子波浪動畫特效，它由一連串點陣列組成，3D效果非常炫酷。今天要介紹的也是一個基于HTML5的點陣列動畫特效，當滑鼠滑過陣列時，陣列圖的局部将産生放大鏡的動畫特效，也具有極強的3D立體視覺效果。
線上示範 源碼下載下傳
4、CSS3僵屍從墓穴爬出來的動畫特效
還記得很早的時候我們給大家分享過一款CSS3僵屍行走動畫嗎？動畫效果十分逼真。這次要給大家分享另外一款有關僵屍的CSS3動畫，這款動畫利用了CSS3特性繪制了一隻僵屍從墓穴出來時的特效，應該是從植物大戰僵屍遊戲中模仿過來的。
線上示範 源碼下載下傳
5、HTML5 Canvas煙花動畫 可控制煙花速度和大小
這款HTML5煙花動畫我們應該比較熟悉，因為之前有分享過類似的HTML5動畫了。這個HTML5煙花動畫是基于canvas的，可以說是之前分享那款的更新版，它可以控制煙花上升的速度和煙花綻放花朵的大小。由于是在HTML5 Canvas畫布上完成，是以也就非常靈活。
線上示範 源碼下載下傳
6、HTML5 Canvas 水母遊動動畫特效
這是一個非常酷的HTML5動畫特效，它是一隻遊動的水母，我們利用HTML5的Canvas技術繪制一隻像素點組合的水母，并且利用JavaScript模拟水母遊動的動畫特效，看上去非常逼真。
線上示範 源碼下載下傳
7、純CSS3實作3D太空飛船 多視角動畫示範
這是一款用純CSS3打造的3D太空飛船動畫，從夜空背景，到飛船上的每一個細節，都使用了CSS3來實作，是以盡管是比較複雜的頁面，加載速度也很快。另外，這款CSS3飛船動畫可以在左上角的控制台中控制飛船的不同視角，同時也可以開啟和關閉飛船尾部的螺旋槳，非常逼真的純CSS3動畫。
線上示範 源碼下載下傳
8、CSS3實作五彩3D旋轉星球
之前我們有分享過很多純CSS3和HTML5實作的球體動畫，比如這款HTML5 3D球體斑點運動動畫和HTML5 Canvas 地球旋轉3D動畫都非常不錯。今天要給大家分享另外一款超炫酷的CSS3五彩3D旋轉星球，旋轉起來的視覺效果相當震撼。
線上示範 源碼下載下傳
以上就是8個超震撼的HTML5和純CSS3動畫源碼，如果你對HTML5感興趣，歡迎收藏和分享。
轉載請注明原文連結：http://www.html5tricks.com/8-html5-pure-css3-animation.html