《p》新的一周開(kāi)始，小編也將繼續(xù)為大家分享精彩的HTML5應(yīng)用，還有CSS3和jQuery方面的東西。今天給大家?guī)?lái)的是8款最受歡迎的HTML5/CSS3應(yīng)用及代碼，一起來(lái)看看吧?！?p》《h2》1、基于HTML5 Canvas的圖表插件Chart.js《/h2》《p》chart.js是一款基于HTML5 Canvas的圖表插件，chart.js的功能非常強(qiáng)大，它不僅提供了常見(jiàn)的柱形圖、折線(xiàn)圖、餅狀圖，而且還提供了環(huán)形圖、雷達(dá)圖，樣式外觀多樣，圖表的色彩搭配也比較清新。chart.js還有一個(gè)特點(diǎn)就是圖表在初始化的時(shí)候有彈性動(dòng)畫(huà)特效，這也是HTML5 Canvas的一大功勞。 《/p》《p》《a href=“http://www.html5tricks.com/demo/chartjs/samples/radar.html”》《img src=“http://img.blog.csdn.net/20170730190033083” alt=“chartjs-html5-canvas” title=“”》《/a》《/p》《p》《a href=“http://www.html5tricks.com/demo/chartjs/samples/bar.html”》柱形圖《/a》 / 《a href=“http://www.html5tricks.com/demo/chartjs/samples/line.html”》折線(xiàn)圖《/a》 / 《a href=“http://www.html5tricks.com/demo/chartjs/samples/pie.html”》餅狀圖《/a》 / 《a href=“http://www.html5tricks.com/demo/chartjs/samples/doughnut.html”》環(huán)形圖《/a》 / 《a href=“http://www.html5tricks.com/demo/chartjs/samples/radar.html”》雷達(dá)圖《/a》 / 《a href=“http://www.html5tricks.com/demo/chartjs/samples/polarArea.html”》極線(xiàn)圖《/a》 / 《a href=“http://www.html5tricks.com/chartjs-html5-canvas.html”》源碼下載《/a》《/p》《h2》2、HTML5 3D動(dòng)畫(huà)柱狀圖表《/h2》《p》這次我們要分享一款很酷的《a href=“http://www.html5tricks.com/” title=“HTML5”》HTML5《/a》 3D圖表應(yīng)用，它是一款柱狀圖表，呈3D的外觀樣式，并且我們可以改變圖表的顏色主題，讓其更加符合你的需求。這款HTML5圖表可以切換需要查看的圖表數(shù)據(jù)，在切換的時(shí)候有不錯(cuò)的動(dòng)畫(huà)效果，而且，我們還可以切換圖表的大小，以適應(yīng)不同大小的瀏覽窗口。 《/p》《p》《a href=“http://www.html5tricks.com/demo/Animated3DBarChart/index.html”》《img src=“http://img.blog.csdn.net/20170730190238719” alt=“html5-3d-animated-chart” title=“”》《/a》《/p》《p》《a href=“http://www.html5tricks.com/demo/Animated3DBarChart/index.html”》在線(xiàn)演示《/a》 / 《a href=“http://www.html5tricks.com/html5-3d-animated-chart.html”》源碼下載《/a》《/p》《h2》3、CSS3 3D環(huán)形進(jìn)度條 帶進(jìn)度百分比《/h2》《p》這是一款基于純CSS3的環(huán)形進(jìn)度條，而且，從外觀上看，這款進(jìn)度條很有3D立體的感覺(jué)，尤其是在進(jìn)度條上有立體的投影，顯得非常小巧迷人。另外，進(jìn)度條的環(huán)形中央帶有進(jìn)度百分比，可以實(shí)時(shí)根據(jù)進(jìn)度來(lái)更新百分比的數(shù)值，和之前分享的《a href=“http://www.html5tricks.com/html5-half-circle-progress.html”》HTML5/CSS3扇形進(jìn)度條動(dòng)畫(huà)《/a》相比有一定優(yōu)勢(shì)。 《/p》《p》《a href=“http://www.html5tricks.com/demo/css3-3d-circle-progress/index.html”》《img src=“http://img.blog.csdn.net/20170730190316007” alt=“” title=“css3-3d-circle-progress”》《/a》《/p》《p》《a href=“http://www.html5tricks.com/demo/css3-3d-circle-progress/index.html”》在線(xiàn)演示《/a》 / 《a href=“http://www.html5tricks.com/css3-3d-circle-progress.html”》源碼下載《/a》《/p》《h2》4、純CSS3垂直Tab菜單 Tab樣式可自定義《/h2》《p》Tab菜單在網(wǎng)頁(yè)上使用起來(lái)非常方便，也比較節(jié)省空間，所以很多門(mén)戶(hù)網(wǎng)站很喜歡用Tab菜單。今天我們要來(lái)分享一款垂直方向的Tab菜單，它是用純CSS3實(shí)現(xiàn)的，加載和切換特別靈活。另外，Tab菜單的樣式你可以使用CSS重新定義，擴(kuò)展很方便。 《/p》《p》《a href=“http://www.html5tricks.com/demo/jquery-ver-tab-menu/index.html”》《img src=“http://img.blog.csdn.net/20170730190405749” alt=“css3-ver-tab-menu” title=“”》《/a》《/p》《p》《a href=“http://www.html5tricks.com/demo/jquery-ver-tab-menu/index.html”》在線(xiàn)演示《/a》 / 《a href=“http://www.html5tricks.com/css3-ver-tab-menu.html”》源碼下載《/a》《/p》《h2》5、純CSS3水平控制按鈕開(kāi)關(guān)《/h2》《p》今天我們要來(lái)分享一款基于純CSS3的水平控制開(kāi)關(guān)按鈕，它有3種不同的顏色風(fēng)格，開(kāi)關(guān)按鈕的數(shù)量可以自己定義，鼠標(biāo)點(diǎn)擊按鈕時(shí)背景色塊將會(huì)緩慢移動(dòng)到所在的按鈕位置，表示用戶(hù)已經(jīng)選中這個(gè)選項(xiàng)。我們可以用它來(lái)控制用戶(hù)的選擇項(xiàng)。 《/p》《p》《a href=“http://www.html5tricks.com/demo/pure-css3-hor-button-switch/index.html”》《img src=“http://img.blog.csdn.net/20170730190436950” alt=“pure-css3-hor-button-switch” title=“”》《/a》《/p》《p》《a href=“http://www.html5tricks.com/demo/pure-css3-hor-button-switch/index.html”》在線(xiàn)演示《/a》 / 《a href=“http://www.html5tricks.com/pure-css3-hor-button-switch.html”》源碼下載《/a》《/p》《h2》6、HTML5/CSS3 3D焦點(diǎn)圖 支持鼠標(biāo)滾輪《/h2》《p》記得以前給大家分享過(guò)一款很酷《a href=“http://www.html5tricks.com/html5-3d-gallery.html”》HTML5 3D相冊(cè)《/a》，不知道你有沒(méi)有研究過(guò)源碼。今天我再向大家分享一款基于HTML5和CSS3的焦點(diǎn)圖相冊(cè)，在瀏覽圖片時(shí)，沒(méi)激活的圖片并不是完全隱藏，而是以3D半透明的方式陳列在主圖旁邊。值得注意的是，這款《a href=“http://www.html5tricks.com/tag/html5-3d” title=“HTML5 3D”》HTML5 3D《/a》焦點(diǎn)圖支持鼠標(biāo)滾輪來(lái)切換圖片。 《/p》《p》《a href=“http://www.html5tricks.com/demo/html5-css3-carousel/index.html”》《img src=“http://img.blog.csdn.net/20170730190505707” alt=“html5-css3-carousel” title=“”》《/a》《/p》《p》《a href=“http://www.html5tricks.com/demo/html5-css3-carousel/index.html”》在線(xiàn)演示《/a》 / 《a href=“http://www.html5tricks.com/html5-css3-carousel.html”》源碼下載《/a》《/p》《h2》7、jQuery仿iPhone解鎖滑塊焦點(diǎn)圖《/h2》《p》這是一款基于jQuery的仿iPhone解鎖滑塊焦點(diǎn)圖，還記得早期iPhone解鎖裝置么，現(xiàn)在我們將這樣的樣式應(yīng)用到這款jQuery焦點(diǎn)圖上。你可以滑動(dòng)鼠標(biāo)，該解鎖裝置就會(huì)跟隨鼠標(biāo)一起滑動(dòng)，同時(shí)，圖片也就完成了切換的效果。 《/p》《p》《a href=“http://www.html5tricks.com/demo/jiaoben334/index.html”》《img src=“http://img.blog.csdn.net/20170730190529760” alt=“jquery-iphone-image-slider” title=“”》《/a》《/p》《p》《a href=“http://www.html5tricks.com/demo/jiaoben334/index.html”》在線(xiàn)演示《/a》 / 《a href=“http://www.html5tricks.com/jquery-iphone-image-slider.html”》源碼下載《/a》《/p》《h2》8、HTML5 DNA螺旋旋轉(zhuǎn)動(dòng)畫(huà)效果《/h2》《p》這是一款基于HTML5的螺旋動(dòng)畫(huà)特效，它就像DNA分子結(jié)構(gòu)一樣，可以繞著中心線(xiàn)不停地旋轉(zhuǎn)。對(duì)于HTML5旋轉(zhuǎn)動(dòng)畫(huà)，之前我們也介紹過(guò)一款，比如這款《a href=“http://www.html5tricks.com/html5-3d-image-block.html”》HTML5 3D圖片切片滑塊旋轉(zhuǎn)動(dòng)畫(huà)《/a》，就非常不錯(cuò)，大家也可以看看。 《/p》《p》《a href=“http://www.html5tricks.com/demo/html5-dna-screw-animation/index.html”》《img src=“http://img.blog.csdn.net/20170730190553705” alt=“html5-dna-screw-animation” title=“”》《/a》《/p》《p》《a href=“http://www.html5tricks.com/demo/html5-dna-screw-animation/index.html”》在線(xiàn)演示《/a》 / 《a href=“http://www.html5tricks.com/html5-dna-screw-animation.html”》源碼下載《/a》《/p》《p》以上就是8款最受歡迎的HTML5/CSS3應(yīng)用及代碼，歡迎收藏分享。轉(zhuǎn)載請(qǐng)注明原文鏈接：《a href=“http://www.html5tricks.com/8-pop-html5-css3-apps.html”》http://www.html5tricks.com/8-pop-html5-css3-apps.html《/a》《/p》