8個超震撼的HTML5和純CSS3動畫源碼

HTML5和CSS3之因此強大，不只由於如今大量的瀏覽器的支持，更是由於它們已經愈來愈能知足現代開發的須要。Flash在幾年以後確定會消亡，那麼HTML5和CSS3將會替代Flash。今天咱們要給你們分享8個最新的HTML5和純CSS3動畫及其源碼，這些動畫很是讓人震撼，你也能夠學習一下HTML5源碼。

一、HTML5 Canvas水波紋動畫特效

HTML5的Canvas特性很是實用，咱們不只能夠在Canvas畫布上繪製各類圖形，也能夠製做絢麗的動畫，好比此次介紹的水波紋動畫特效。之前咱們也分享過一款基於HTML5 WebGL的水波盪漾動畫，讓人驚歎不已，此次分享的HTML5 Canvas水波紋動畫一樣很是震撼人心。

在線演示  源碼下載

二、HTML5 Canvas人物四肢模擬及身體碰撞動畫

前幾天咱們剛剛爲你們分享過一款基於HTML5的人物四肢關節伸展模擬動畫，它能夠模擬人物的頭部、四肢伸展狀況，至關逼真。今天要介紹的這款HTML5 Canvas動畫在原來四肢模擬的基礎上，添加了身體碰撞模擬的動畫特效，咱們用鼠標模擬一個大鐵球，移動鼠標後將大鐵球撞擊人物的身體，人物身體受到做用力後就會按必定方向進行翻轉活動，所以四肢也隨着伸展和擺動。固然這種動畫也應用了HTML5的重力感應特性。這種相似的動畫之前也介紹過一些，好比HTML5圖片相冊重力感應特效。

在線演示  源碼下載

三、HTML5點陣列局部放大鏡動畫特效

記得之前咱們分享過一款很酷的HTML5 3D 粒子波浪動畫特效，它由一連串點陣列組成，3D效果很是炫酷。今天要介紹的也是一個基於HTML5的點陣列動畫特效，當鼠標滑過陣列時，陣列圖的局部將產生放大鏡的動畫特效，也具備極強的3D立體視覺效果。

在線演示  源碼下載

四、CSS3殭屍從墓穴爬出來的動畫特效

還記得很早的時候咱們給你們分享過一款CSS3殭屍行走動畫嗎？動畫效果十分逼真。此次要給你們分享另一款有關殭屍的CSS3動畫，這款動畫利用了CSS3特性繪製了一隻殭屍從墓穴出來時的特效，應該是從植物大戰殭屍遊戲中模仿過來的。

在線演示  源碼下載

五、HTML5 Canvas煙花動畫 可控制煙花速度和大小

這款HTML5煙花動畫咱們應該比較熟悉，由於以前有分享過相似的HTML5動畫了。這個HTML5煙花動畫是基於canvas的，能夠說是以前分享那款的升級版，它能夠控制煙花上升的速度和煙花綻開花朵的大小。因爲是在HTML5 Canvas畫布上完成，所以也就很是靈活。

在線演示  源碼下載

六、HTML5 Canvas 水母遊動動畫特效

這是一個很是酷的HTML5動畫特效，它是一隻遊動的水母，咱們利用HTML5的Canvas技術繪製一隻像素點組合的水母，而且利用JavaScript模擬水母遊動的動畫特效，看上去很是逼真。

在線演示  源碼下載

七、純CSS3實現3D太空飛船 多視角動畫演示

這是一款用純CSS3打造的3D太空飛船動畫，從夜空背景，到飛船上的每個細節，都使用了CSS3來實現，因此儘管是比較複雜的頁面，加載速度也很快。另外，這款CSS3飛船動畫能夠在左上角的控制面板中控制飛船的不一樣視角，同時也能夠開啓和關閉飛船尾部的螺旋槳，很是逼真的純CSS3動畫。

在線演示  源碼下載

八、CSS3實現五彩3D旋轉星球

以前咱們有分享過不少純CSS3和HTML5實現的球體動畫，好比這款HTML5 3D球體斑點運動動畫和HTML5 Canvas 地球旋轉3D動畫都很是不錯。今天要給你們分享另一款超炫酷的CSS3五彩3D旋轉星球，旋轉起來的視覺效果至關震撼。

在線演示  源碼下載

以上就是8個超震撼的HTML5和純CSS3動畫源碼，若是你對HTML5感興趣，歡迎收藏和分享。