之前我們已經向大家分享了很多HTML5動畫應用了，大部分都非常炫酷，也有一小部分是很實用的。今天我們要向各位HTML5動畫愛好者介紹更多的HTML5 3D動畫應用，希望大家能更加喜歡。
1、HTML5鯨魚動畫 又一款超酷HTML5動畫
之前看到過同樣效果的一款鯨魚動畫，不過可惜的是那個動畫是用flash制作的。今天我找到了基于HTML5的鯨魚動畫，鯨魚會隨著鼠標的移動而游動，畫面非常立體，鯨魚也超級逼真。真的，HTML5確實很給力，HTML5動畫完全可以完成flash能做的事情。
html5-whale
2、HTML5夢幻特效 可給任意元素添加魔幻效果
我們之前介紹HTML5動畫特效比較多的是HTML5 3D特效，今天我們來換一種風格，來分享一款看起來比較魔幻的HTML5特效。它可以給網頁上任意元素（圖片、文字等）添加這么一種效果，即鼠標滑過時，元素上就會出現非常魔幻的動畫特效，什么特效呢？你可以點開demo鏈接查看。
html5-magic-effect
3、HTML5 Canvas繪制灰太狼 超級可愛
HTML5 Canvas相當于一個畫板，你可以在Canvas繪制任意的東西，今天要分享一款利用HTML5 Canvas繪制的灰太狼形象，個人以為，這個灰太狼繪制得十分逼真形象，小伙伴們都要驚呆了。以后我們再來弄一個HTML5 Canvas的喜洋洋如何？
html5-canvas-huitailang
4、HTML5 3D圖片切片滑塊旋轉動畫 超酷的HTML5 3D特效
先來說說怎么玩這款HTML5 3D圖片動畫特效，我們只需要在圖片上面拖動鼠標，圖片即會在垂直方向分裂出數塊小長方體，然后每一個小長方體沿著鼠標拖動的方向旋轉。這款HTML5 3D動畫非常酷，它的實現離不開js動畫框架TweenMax。
html5-3d-image-block
5、HTML5/CSS3 3D文字特效 文字立體可旋轉
今天我們要分享一款效果挺不錯的HTML5 3D文字特效，首先文字本身具有投影的立體效果，再加上文字的旋轉擺動動畫，就更顯文字3D動感了。之前我們也分享過幾款挺不錯的HTML5文字特效，像HTML5/CSS3 3D文字特效 文字外翻效果，也具有3D的效果。
html5-css3-3d-text
6、純CSS3繪制可愛的蚱蜢 還有眨眼動畫
今天我們要分享一個利用純CSS3繪制的蚱蜢動畫，非常可愛，之前我們也分享過很多利用純CSS3繪制的人物、動物等很有特點的效果，比如純CSS3繪制可愛小男孩動畫、純CSS3 Android Logo動畫繪制等。這款CSS3蚱蜢還有眨眼的動畫，非常酷。
css3-grasshopper
7、HTML5像素粉碎圖片動畫 圖片灑落一地
這款HTML5圖片動畫特效你絕對想不到，它將一張圖片粉碎成許多像素顆粒，點擊圖片后，這些像素顆粒邊掉落在地上，繼續點擊，粉碎的像素圖片顆粒又會重新組合成完整的圖片。用HTML5技術實現這種圖片粉碎效果還是挺簡單的，有興趣的同學可以下載源碼來學習。
html5-pixel-image-effect
8、用HTML5/CSS3給女朋友送個生日蛋糕
現在有了HTML5，我們在瀏覽器上制作動畫已經不是什么難事了，但是一個好的創意卻很難，比如說用技術來博得女孩子的喜歡。今天我們分享的這款生日蛋糕動畫非常有創意，它是用svg來做的，利用HTML5的api讓制作蛋糕的過程展示出來，這個蛋糕在妹子生日的時候送給她一定會讓她覺得很驚奇。祝你成功哦！
html5-css3-new-cake
9、HTML5/CSS3奔跑動畫 動畫效果非常逼真
今天要分享一款很酷的模擬真人奔跑動畫，它主要是利用HTML5/CSS3技術結合多張圖片的切換來實現的。這款HTML5動畫的逼真之處在于人物在奔跑的時候很有節奏感，而且有人物的投影。更重要的是當人物跑的越來越近是，人物的大小也會隨之變大。很像一個小男孩從遠處跑過來。
html5-boy-run-animation
后歡迎大家分享和收藏，HTML5非常強大。
本文鏈接：http://www.html5tricks.com/9-wonderful-html5-3d-animation.html
本文作者：html5tricks – 超人
本站文章版權歸原作者及原出處所有 。內容為作者個人觀點， 并不代表本站贊同其觀點和對其真實性負責，本站只提供參考并不構成任何投資及應用建議。本站是一個個人學習交流的平臺，網站上部分文章為轉載，并不用于任何商業目的，我們已經盡可能的對作者和來源進行了通告，但是能力有限或疏忽，造成漏登，請及時聯系我們，我們將根據著作權人的要求，立即更正或者刪除有關內容。本站擁有對此聲明的最終解釋權。
