TML5技術已經越來越被我們所接受，特別是一些3D的動畫特效。本文介紹的8個HTML5 3D動畫并沒有特別華麗的界面，但是比較實用，涉及到3D圖片、3D圖表、3D按鈕等方面，一起來看看。

1、HTML5 3D動畫柱形圖表

這次我們要來分享一款效果非常酷的HTML5 3D柱形圖表，這款HTML5圖表和之前分享的都不一樣，主要是外觀上比較吸引人，首先圖表是3D立體的，有一種非常棒的視覺效果；其次，當鼠標劃過柱形圖表時，會有很不錯的HTML5動畫效果。

2、HTML5 3D 粒子波浪動畫特效

今天我們分享一款升級版HTML5 3D粒子波浪動畫特效，我們可以旋轉不同的視角來欣賞粒子波浪的滾動特效。HTML5在動畫制作方面的確讓人眼前一亮。

3、HTML5自定義文字背景生成QQ簽名檔

這是一款利用HTML5實現的自定義文字背景應用，首先我們可以輸入需要顯示的文字，并且為該文字選擇一張背景圖片，背景圖片就像蒙版一樣覆蓋在文字上。點擊生成QQ簽名檔即可將文字背景融為一體生成另外一張圖片，你也可以下載這張擁有你QQ簽名檔的圖片。

4、HTML5坦克大戰游戲簡化版

今天分享的是一款簡化版的HTML5坦克大戰游戲，方向鍵控制坦克的行進方向，空格鍵發射子彈，命中敵方坦克后也會發出聲音，效果還算可以。

5、HTML5 3D陰影文字特效

今天我們要來分享一款非常簡單大氣的HTML5 3D文字特效，這個3D文字特效是通過文字加粗以及文字陰影來實現的，效果非常不錯。同時我們在html5tricks網站上也分享過很多炫酷的文字特效，比如CSS3文字陰影效果 陰影角度可隨鼠標變化、動感的CSS3 Loading文字特效。

6、HTML5 3D衣服擺動特效 超酷HTML5 3D動畫

今天向大家分享一款HTML5 3D衣服擺動動畫特效，動畫也是在HTML5 Canvas上完成，它模擬衣服晾在繩子上，點擊鼠標可以讓衣服擺動起來，就行風吹動它一樣，非常逼真炫酷。

7、HTML5/CSS3一組可愛的3D按鈕

這是一款利用HTML5和CSS3制作而成的按鈕組合，這款CSS按鈕非常具有個性化。該CSS3按鈕不僅具有3D的外觀，點擊按鈕也具有非常立體的效果，更具有特點的是這款CSS3按鈕的形狀是不規則的，而且按鈕中都有一個可愛的小圖標。

8、HTML5 Canvas 3D折線圖表應用

今天我們再來討論一下關于HTML5圖表應用的問題，這款HTML5圖表是基于canvas的3D折線圖表，圖表在初始化的時候會根據數據點把折線分割成多條線段，然后線段將逐漸懸浮到數據點對應數值的位置。由于是3D的效果，所以圖表的折線也和其他折線圖表的不同。

以上就是8個經典的HTML5 3D動畫賞析，希望大家喜歡。

hart.js是一個開源、簡單而靈活、使用HTML5的canvas元素的JavaScript圖表，支持柱型和線型混合顯示提供清晰的視覺區別，在所有現代瀏覽器（IE9+）提供強大的渲染性能，有8種不同的圖表類型，每一種都是可定制的；當瀏覽器大小發生改變時他會重新繪制圖表。

1、下載及初始化

https://github.com/chartjs/Chart.js

在github下載后，你必須構建Chart.js生成dist文件。然后在頁面中引入生成的dist/Chart.js文件；或者直接引入托管平臺上的Chart.js文件。

然后在頁面body中創建一個<canvas>元素。

最后，以上準備好了就能創建一個圖表了，在頁面中添加一個腳本。

npm安裝命令：npm install chart.js --save

bower安裝命令：bower install chart.js --save

2、基本演示

①柱形圖表

②線形圖表

③面積圖表

④餅形圖表

⑤柱、線混合

⑥散點圖

⑦網格線圖表

官方網站：

http://www.chartjs.org/

Chart.js只有一些基礎的圖表，簡單的可視化數據展示，同時能夠動態改變數據、更新顏色、添加數據等，能夠重繪圖表調整到完美規模的粒度。內含多種鼠標事件，提供許多選項來配置動畫的樣子。Chart.js適合只需要簡單圖表的項目，如果需要更復雜的顯示，可以選擇echarts或Highcharts圖表庫。

有哪里寫得不好的地方請大家提出來，請輕噴，謝謝。 同時有什么與編程相關的好東西可以推舉給我，再次感謝！

.超簡易的SVG/CSS3 Loading加載動畫圖標

今天我們要為大家分享一組非常簡易的SVG/CSS3 Loading加載動畫圖標，和之前分享的SVG實現的一組超華麗Loading加載動畫相比，這組Loading動畫更見簡單，它主要由圓環形和柱形兩種樣式組成，可以將這些Loading圖標應用在很多種類型的頁面中，非常實用。

2.jQuery左右切換焦點圖插件 3D陰影相框

這是一款相對比較簡單而實用的jQuery焦點圖應用，它的特點是左右切換按鈕懸浮在圖片右下角，點擊切換按鈕即可讓圖片進行左右平移地切換，效果著實是簡單，但是個人覺得很實用。另外還有一個特點是，這款jQuery焦點圖插件帶有3D陰影的相框，從而簡單中稍帶一點點華麗。

3.jQuery層疊圖片細節對比插件

之前我們分享過幾款比較實用的圖片對比插件，比如這款JavaScript圖片拖動對比 實現圖片差異定位就非常強大，可以左右滑動。今天我們要介紹的這款jQuery層疊圖片細節對比插件功能也比較實用，可以通過鼠標滑動圖片上方的滑桿來對比兩張圖片的細節。

4.jQuery自定義美化Select下拉框插件

之前我們分享過很多款非常漂亮而且實用的jQuery美化版Select下拉框插件，比如jQuery Select下拉框美化插件 菜單淡如淡出動畫和漂亮實用的Select下拉框美化插件Tether都非常不錯。今天我們要給大家介紹另一款基于jQuery的自定義美化Select下拉框插件，它的配置十分簡單，引用插件庫后用幾行jQuery代碼初始化即可。

5.純CSS3實現的蒙娜麗莎畫像

蒙娜麗莎畫像非常著名，如果告訴你這幅畫像我們可以使用純CSS3繪制而成，你是否會覺得非常驚訝。沒錯，今天我們要分享的就是這個使用純CSS3，沒有使用任何圖片的蒙娜麗莎畫像，實現原理是利用CSS3的陰影特性，逐層用不同的顏色渲染，從而形成這幅蒙娜麗莎巨作，當然有點模糊是肯定的，畢竟是通過投影渲染的，是不是覺得非常神奇。

6.CSS3社交關系網模擬動畫

這次我們要給大家分享一款CSS3模擬社交關系網的動畫特效，社交網的中心是用戶的頭像圖片，由中心連線展開到各個社交網絡的Logo圖片，同時每一條連接線上面都會有一個圓點由中心向各個節點移動，形成關系網的模擬動畫，利用CSS3，我們可以讓點運動，也可以讓圖片變成圓形，還是比較有趣的。

7.CSS3自定義菜單內容的二級下拉菜單

之前我們分享過很多基于jQuery和CSS3的二級下拉菜單，大部分都非常實用，當然也不乏炫酷的動畫，比如這款HTML5/CSS3水平二級下拉菜單就比較樸實，這款jQuery/CSS3波浪形彈性下拉菜單就比較富有個性。今天我們要分享的這款CSS3下拉菜單特點在于二級下拉菜單內容可以自定義，可以是簡單的多列，也可以是復雜的圖文排版。

8.HTML5 多維度3D圖片切換動畫

今天我們要給大家分享一款非常特別的HTML5/CSS3焦點圖插件，這款焦點圖插件可以實現XY兩個維度的圖片切換動畫，并且圖片在排列時有一種3D立體的視覺效果，這樣的效果正是使用了CSS3特殊屬性改變了圖片4條邊的傾斜角度。

9.純CSS3乒乓球動畫

這是一個比較有意思的純CSS3乒乓球動畫特效，主要是模擬了乒乓球運動動畫，畫面上用CSS3繪制了一張乒乓球桌，一個乒乓球在球桌上來回運動，就好象兩個運動員在打乒乓球一樣。當然如果你可以在球桌兩端繪制兩個運動員那就更加逼真的，有興趣的同學可以自己研究一下。

10.移動端可拖拽jQuery圖片切換插件 帶Tooltip縮略圖

這是一款很特別的jQuery焦點圖插件，它和其他的圖片切換插件不同，它主要在移動設備上使用，因此我們并不能像其他焦點圖插件那樣點擊切換按鈕來切換圖片，而是通過滑動帶Tooltip外觀的縮略圖來切換圖片，并且圖片顯示時采用中心放大擴散的動畫特效，效果還是不錯。

11.CSS3帶數字時鐘的創意圓盤時鐘動畫

前幾天我們剛剛為大家分享過一款基于SVG和CSS3的復古圓盤時鐘，大家可以在這里查看演示和這里下載源碼。今天又要給大家帶來另外一款CSS3圓盤時鐘，它的特點是圓盤對半分，一半顯示數字時鐘信息，另一半是半個圓盤時鐘，樣式設計上非常富有創意。

12.精美的jQuery視差效果圖片輪播插件

今天讓我們給大家分享一款基于jQuery的視差效果的圖片輪播插件，它與一般的jQuery焦點圖插件相比，并不是圖片之間的切換，而是各種網頁元素懸浮在一張大背景圖上，切換時背景逐漸移動，另外背景上的元素也會跟著切換，與之類似的還有一款jQuery視差效果的焦點圖插件。

13.CSS3鼠標滑過圖片覆蓋漸變顏色蒙版

今天我們要介紹一款比較實用的CSS3圖片特效，它并沒有非常華麗的動畫效果，但是很多場合都可以用到。當我們將鼠標滑過圖片時，圖片上方會覆蓋一層漸變顏色的蒙版，移開圖片蒙版又會以漸變的方式消失，同時這層蒙版由于顏色動態漸變，因此給人一種發光的視覺效果。

14.純CSS3可愛笑臉開關切換按鈕

近期我們集中為大家分享過很多基于HTML5和CSS3的開關切換按鈕，像這款多組超具創意的CSS3開關切換按鈕擁有多套風格的外觀，還有這款漂亮的CSS3/SVG個性化開關按鈕又非常具有創意。今天要分享的這款同樣也富有創意，整個開關按鈕由笑臉和哭臉組成，點擊按鈕后可以在笑臉哭臉之間切換，另外按鈕帶有陰影，看起來有3D立體的視覺效果。

15.純CSS3/SVG實現的帶秒針表盤圓盤復古時鐘

現在的網頁上圓盤時鐘越來越少見了，更多的是數字時鐘和數字日歷。之前我們分享過一些基于jQuery和CSS3的圓盤時鐘動畫，比如純CSS3 3D立體圓盤時鐘動畫和jQuery實現一個掛在墻上的圓盤時鐘動畫都非常不錯。這次要給大家帶來一款比較復古的圓盤時鐘，基于純CSS3，盤面是SVG繪制而成，并沒有使用任何圖片。時鐘整體外觀比較懷舊，給人不一樣的視覺感受。