1、基於HTML5 Canvas的圖表外掛Chart.js
chart.js是一款基於HTML5 Canvas的圖表外掛,chart.js的功能非常強大,它不僅提供了常見的柱形圖、折線圖、餅狀圖,而且還提供了環形圖、雷達圖,樣式外觀多樣,圖表的色彩搭配也比較清新。chart.js還有一個特點就是圖表在初始化的時候有彈性動畫特效,這也是HTML5Canvas的一大功勞。
2、HTML5 3D動畫柱狀圖表
這次我們要分享一款很酷的HTML5 3D圖表應用,它是一款柱狀圖表,呈3D的外觀樣式,並且我們可以改變圖表的顏色主題,讓其更加符合你的需求。這款HTML5圖表可以切換需要檢視的圖表資料,在切換的時候有不錯的動畫效果,而且,我們還可以切換圖表的大小,以適應不同大小的瀏覽視窗。
3、CSS3 3D環形進度條 帶進度百分比
這是一款基於純CSS3的環形進度條,而且,從外觀上看,這款進度條很有3D立體的感覺,尤其是在進度條上有立體的投影,顯得非常小巧迷人。另外,進度條的環形中央帶有進度百分比,可以實時根據進度來更新百分比的數值,和之前分享的HTML5/CSS3扇形進度條動畫相比有一定優勢。
4、純CSS3垂直Tab選單 Tab樣式可自定義
Tab選單在網頁上使用起來非常方便,也比較節省空間,所以很多入口網站很喜歡用Tab選單。今天我們要來分享一款垂直方向的Tab選單,它是用純CSS3實現的,載入和切換特別靈活。另外,Tab選單的樣式你可以使用CSS重新定義,擴充套件很方便。
5、純CSS3水平控制按鈕開關
今天我們要來分享一款基於純CSS3的水平控制開關按鈕,它有3種不同的顏色風格,開關按鈕的數量可以自己定義,滑鼠點選按鈕時背景色塊將會緩慢移動到所在的按鈕位置,表示使用者已經選中這個選項。我們可以用它來控制使用者的選擇項。
6、HTML5/CSS3 3D焦點圖 支援滑鼠滾輪
記得以前給大家分享過一款很酷HTML5 3D相簿,不知道你有沒有研究過原始碼。今天我再向大家分享一款基於HTML5和CSS3的焦點圖相簿,在瀏覽圖片時,沒啟用的圖片並不是完全隱藏,而是以3D半透明的方式陳列在主圖旁邊。值得注意的是,這款HTML5 3D焦點圖支援滑鼠滾輪來切換圖片。
7、jQuery仿iPhone解鎖滑塊焦點圖
這是一款基於jQuery的仿iPhone解鎖滑塊焦點圖,還記得早期iPhone解鎖裝置麼,現在我們將這樣的樣式應用到這款jQuery焦點圖上。你可以滑動滑鼠,該解鎖裝置就會跟隨滑鼠一起滑動,同時,圖片也就完成了切換的效果。
8、HTML5 DNA螺旋旋轉動畫效果
這是一款基於HTML5的螺旋動畫特效,它就像DNA分子結構一樣,可以繞著中心線不停地旋轉。對於HTML5旋轉動畫,之前我們也介紹過一款,比如這款HTML5 3D圖片切片滑塊旋轉動畫,就非常不錯,大家也可以看看。
以上就是8款最受歡迎的HTML5/CSS3應用及程式碼,歡迎收藏分享。
http://www.html5tricks.com/8-pop-html5-css3-apps.html