新的一周開始，小編也將繼續(xù)為大家分享精彩的HTML5應(yīng)用，還有CSS3和jQuery方面的東西。今天給大家?guī)淼氖?款最受歡迎的HTML5/CSS3應(yīng)用及代碼，一起來看看吧。

1、基于HTML5 Canvas的圖表插件Chart.js

chart.js是一款基于HTML5 Canvas的圖表插件，chart.js的功能非常強大，它不僅提供了常見的柱形圖、折線圖、餅狀圖，而且還提供了環(huán)形圖、雷達圖，樣式外觀多樣，圖表的色彩搭配也比較清新。chart.js還有一個特點就是圖表在初始化的時候有彈性動畫特效，這也是HTML5 Canvas的一大功勞。

柱形圖折線圖餅狀圖環(huán)形圖雷達圖極線圖源碼下載

2、HTML5 3D動畫柱狀圖表

這次我們要分享一款很酷的HTML5?3D圖表應(yīng)用，它是一款柱狀圖表，呈3D的外觀樣式，并且我們可以改變圖表的顏色主題，讓其更加符合你的需求。這款HTML5圖表可以切換需要查看的圖表數(shù)據(jù)，在切換的時候有不錯的動畫效果，而且，我們還可以切換圖表的大小，以適應(yīng)不同大小的瀏覽窗口。

在線演示? ? ? ??源碼下載

3、CSS3 3D環(huán)形進度條 帶進度百分比

這是一款基于純CSS3的環(huán)形進度條，而且，從外觀上看，這款進度條很有3D立體的感覺，尤其是在進度條上有立體的投影，顯得非常小巧迷人。另外，進度條的環(huán)形中央帶有進度百分比，可以實時根據(jù)進度來更新百分比的數(shù)值，和之前分享的HTML5/CSS3扇形進度條動畫相比有一定優(yōu)勢。

在線演示? ? ? ??源碼下載

4、純CSS3垂直Tab菜單 Tab樣式可自定義

Tab菜單在網(wǎng)頁上使用起來非常方便，也比較節(jié)省空間，所以很多門戶網(wǎng)站很喜歡用Tab菜單。今天我們要來分享一款垂直方向的Tab菜單，它是用純CSS3實現(xiàn)的，加載和切換特別靈活。另外，Tab菜單的樣式你可以使用CSS重新定義，擴展很方便。

在線演示? ? ? ??源碼下載

5、純CSS3水平控制按鈕開關(guān)

今天我們要來分享一款基于純CSS3的水平控制開關(guān)按鈕，它有3種不同的顏色風(fēng)格，開關(guān)按鈕的數(shù)量可以自己定義，鼠標點擊按鈕時背景色塊將會緩慢移動到所在的按鈕位置，表示用戶已經(jīng)選中這個選項。我們可以用它來控制用戶的選擇項。

在線演示? ? ? ??源碼下載

6、HTML5/CSS3 3D焦點圖 支持鼠標滾輪

記得以前給大家分享過一款很酷HTML5 3D相冊，不知道你有沒有研究過源碼。今天我再向大家分享一款基于HTML5和CSS3的焦點圖相冊，在瀏覽圖片時，沒激活的圖片并不是完全隱藏，而是以3D半透明的方式陳列在主圖旁邊。值得注意的是，這款HTML5 3D焦點圖支持鼠標滾輪來切換圖片。

在線演示? ? ? ??源碼下載

7、jQuery仿iPhone解鎖滑塊焦點圖

這是一款基于jQuery的仿iPhone解鎖滑塊焦點圖，還記得早期iPhone解鎖裝置么，現(xiàn)在我們將這樣的樣式應(yīng)用到這款jQuery焦點圖上。你可以滑動鼠標，該解鎖裝置就會跟隨鼠標一起滑動，同時，圖片也就完成了切換的效果。

在線演示? ? ? ??源碼下載

8、HTML5 DNA螺旋旋轉(zhuǎn)動畫效果

這是一款基于HTML5的螺旋動畫特效，它就像DNA分子結(jié)構(gòu)一樣，可以繞著中心線不停地旋轉(zhuǎn)。對于HTML5旋轉(zhuǎn)動畫，之前我們也介紹過一款，比如這款HTML5 3D圖片切片滑塊旋轉(zhuǎn)動畫，就非常不錯，大家也可以看看。

在線演示? ? ? ??源碼下載

以上就是8款最受歡迎的HTML5/CSS3應(yīng)用及代碼，歡迎收藏分享。轉(zhuǎn)載請注明原文鏈接：http://www.html5tricks.com/8-pop-html5-css3-apps.html

總結(jié)

以上是生活随笔為你收集整理的8款最受欢迎的HTML5/CSS3应用及代码的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。