今天要分享給大家的是9款完美體驗(yàn)的HTML5/jQuery應(yīng)用，這些基于HTML5和jQuery的應(yīng)用都比較實(shí)用，而且也相對(duì)比較華麗，當(dāng)然，這需要你使用支持HTML5的瀏覽器，一起來(lái)看看。

1、jQuery動(dòng)畫(huà)圖標(biāo)菜單導(dǎo)航 仿蘋(píng)果樣式

這次要分享的這款jQuery插件非?？?，它是一款帶有動(dòng)畫(huà)按鈕的jQuery菜單插件。而且從菜單的外觀上來(lái)看，有點(diǎn)蘋(píng)果菜單風(fēng)格的味道。當(dāng)我們將鼠標(biāo)滑過(guò)菜單項(xiàng)時(shí)，即會(huì)有對(duì)應(yīng)的圖片懸浮到菜單項(xiàng)上面，效果非常不錯(cuò)的jQuery菜單。

在線(xiàn)演示        源碼下載

2、jQuery仿蘋(píng)果樣式焦點(diǎn)圖插件

這次我們要分享的這款jQuery焦點(diǎn)圖非常特別，它的外觀特別簡(jiǎn)單，但是又相當(dāng)大氣。焦點(diǎn)圖的整體樣式是仿蘋(píng)果樣式的，由于jQuery的運(yùn)用，我們只要點(diǎn)擊圖片下方的縮略圖即可達(dá)到圖片切換的焦點(diǎn)圖特效，這款jQuery焦點(diǎn)圖插件非常適合在產(chǎn)片展示的網(wǎng)頁(yè)上使用。

在線(xiàn)演示        源碼下載

3、jQuery 3D圖片滑塊焦點(diǎn)圖插件

這是一款很酷的jQuery 3D焦點(diǎn)圖插件，和之前分享的jQuery焦點(diǎn)圖不同的是，這款焦點(diǎn)圖插件的圖片切換播放樣式是3D的，圖片就像立方體一樣可以上下翻滾，同時(shí)你不僅可以點(diǎn)擊焦點(diǎn)圖的左右切換按鈕，也可以通過(guò)圖片下方的小按鈕進(jìn)行圖片切換。

在線(xiàn)演示        源碼下載

4、CSS3分享按鈕動(dòng)畫(huà)特效

這是一款基于CSS3的社會(huì)化分享按鈕，按鈕非常簡(jiǎn)單，提供了分享到twitter、facebook、youtube等大型社交網(wǎng)站。每一個(gè)分享按鈕都有個(gè)大社交網(wǎng)站的Logo圖標(biāo)，并且在鼠標(biāo)滑過(guò)這些按鈕時(shí)，利用CSS3的動(dòng)畫(huà)特性出現(xiàn)滑動(dòng)的動(dòng)畫(huà)效果。

在線(xiàn)演示        源碼下載

5、jQuery動(dòng)畫(huà)進(jìn)度條 實(shí)時(shí)顯示進(jìn)度百分比

這是一款基于jQuery的進(jìn)度條插件，這款進(jìn)度條插件在顯示進(jìn)度條的時(shí)候出現(xiàn)很不錯(cuò)的動(dòng)畫(huà)效果，另外，進(jìn)度條在更新進(jìn)度時(shí)也將實(shí)時(shí)顯示進(jìn)度數(shù)字百分比。進(jìn)度條結(jié)束時(shí)，會(huì)顯示完成字樣。由于是基于jQuery的，所以這款進(jìn)度條基本兼容所有瀏覽器。

在線(xiàn)演示        源碼下載

6、基于Bootstrap和CSS3的響應(yīng)式UI框架

還記得之前我們分享過(guò)的Metro扁平化風(fēng)格的jQuery UI組件么，看上去是不是非常清新和絢麗？今天我們要來(lái)分享一組基于Bootstrap和CSS3的響應(yīng)式UI框架，這個(gè)UI框架中，包含了自定義CSS3按鈕、自定義CSS3復(fù)選框和單選框、自定義CSS3下拉框等等，外觀非常漂亮。

在線(xiàn)演示        源碼下載

7、HTML5/CSS3鼠標(biāo)滑過(guò)圖片濾鏡動(dòng)畫(huà)效果

以前我們用CSS的濾鏡屬性來(lái)對(duì)圖片做特殊的效果處理，比如陰影、模糊等。今天我們用HTML5和CSS3來(lái)實(shí)現(xiàn)圖片的特效處理，當(dāng)我們將鼠標(biāo)滑過(guò)圖片時(shí)，即會(huì)出現(xiàn)很不錯(cuò)的圖片動(dòng)畫(huà)特效，像淡入淡出、放大縮小、百葉窗遮罩等HTML5特效。

在線(xiàn)演示        源碼下載

8、CSS3垂直進(jìn)度條動(dòng)畫(huà) 數(shù)字百分比顯示

這次我們要來(lái)分享一款CSS3進(jìn)度條動(dòng)畫(huà)，這款進(jìn)度條是垂直放置的，在進(jìn)度加載的時(shí)候，進(jìn)度條的背景會(huì)出現(xiàn)一個(gè)快速移動(dòng)的箭頭動(dòng)畫(huà)，并且隨著進(jìn)度條的移動(dòng)，數(shù)字百分比也將隨著進(jìn)度實(shí)時(shí)更新，直至進(jìn)度完成，完成后進(jìn)度條顏色由紅色編程綠色。

在線(xiàn)演示        源碼下載

9、CSS3登錄表單動(dòng)畫(huà) 可自動(dòng)輸入登錄信息

這是一款可自動(dòng)輸入登錄信息的CSS3登錄表單動(dòng)畫(huà)，這個(gè)動(dòng)畫(huà)模擬了用戶(hù)從表單輸入登錄信息，點(diǎn)擊登錄按鈕，并登錄成功彈出歡迎信息這一全部過(guò)程，并且你可以重復(fù)播放這個(gè)動(dòng)畫(huà)。CSS3的確很強(qiáng)大，尤其在動(dòng)畫(huà)方面，CSS3非常不錯(cuò)。

在線(xiàn)演示        源碼下載

以上就是9款完美體驗(yàn)的HTML5/jQuery應(yīng)用，歡迎收藏分享。

本文鏈接：http://www./9-well-experience-html5-jquery.html
本文作者：html5tricks – 超人