9款完美體驗的HTML5/jQuery應用

---

1、jQuery動畫圖示選單導航 仿蘋果樣式

這次要分享的這款jQuery外掛非常酷，它是一款帶有動畫按鈕的jQuery選單外掛。而且從選單的外觀上來看，有點蘋果選單風格的味道。當我們將滑鼠滑過選單項時，即會有對應的圖片懸浮到選單項上面，效果非常不錯的jQuery選單。

線上演示 原始碼下載

2、jQuery仿蘋果樣式焦點圖外掛

這次我們要分享的這款jQuery焦點圖非常特別，它的外觀特別簡單，但是又相當大氣。焦點圖的整體樣式是仿蘋果樣式的，由於jQuery的運用，我們只要點選圖片下方的縮圖即可達到圖片切換的焦點圖特效，這款jQuery焦點圖外掛非常適合在產片展示的網頁上使用。

線上演示 原始碼下載

3、jQuery 3D圖片滑塊焦點圖外掛

這是一款很酷的jQuery3D焦點圖外掛，和之前分享的jQuery焦點圖不同的是，這款焦點圖外掛的圖片切換播放樣式是3D的，圖片就像立方體一樣可以上下翻滾，同時你不僅可以點選焦點圖的左右切換按鈕，也可以通過圖片下方的小按鈕進行圖片切換。

線上演示 原始碼下載

4、CSS3分享按鈕動畫特效

這是一款基於CSS3的社會化分享按鈕，按鈕非常簡單，提供了分享到twitter、facebook、youtube等大型社交網站。每一個分享按鈕都有個大社交網站的Logo圖示，並且在滑鼠滑過這些按鈕時，利用CSS3的動畫特性出現滑動的動畫效果。

線上演示 原始碼下載

5、jQuery動畫進度條 實時顯示進度百分比

這是一款基於jQuery的進度條外掛，這款進度條外掛在顯示進度條的時候出現很不錯的動畫效果，另外，進度條在更新進度時也將實時顯示進度數字百分比。進度條結束時，會顯示完成字樣。由於是基於jQuery的，所以這款進度條基本相容所有瀏覽器。

線上演示 原始碼下載

6、基於Bootstrap和CSS3的響應式UI框架

還記得之前我們分享過的Metro扁平化風格的jQueryUI元件麼，看上去是不是非常清新和絢麗？今天我們要來分享一組基於Bootstrap和CSS3的響應式UI框架，這個UI框架中，包含了自定義CSS3按鈕、自定義CSS3核取方塊和單選框、自定義CSS3下拉框等等，外觀非常漂亮。

線上演示 原始碼下載

7、HTML5/CSS3滑鼠滑過圖片濾鏡動畫效果

以前我們用CSS的濾鏡屬性來對圖片做特殊的效果處理，比如陰影、模糊等。今天我們用HTML5和CSS3來實現圖片的特效處理，當我們將滑鼠滑過圖片時，即會出現很不錯的圖片動畫特效，像淡入淡出、放大縮小、百葉窗遮罩等HTML5特效。

線上演示 原始碼下載

8、CSS3垂直進度條動畫 數字百分比顯示

這次我們要來分享一款CSS3進度條動畫，這款進度條是垂直放置的，在進度載入的時候，進度條的背景會出現一個快速移動的箭頭動畫，並且隨著進度條的移動，數字百分比也將隨著進度實時更新，直至進度完成，完成後進度條顏色由紅色程式設計綠色。

線上演示 原始碼下載

9、CSS3登入表單動畫 可自動輸入登入資訊

這是一款可自動輸入登入資訊的CSS3登入表單動畫，這個動畫模擬了使用者從表單輸入登入資訊，點選登入按鈕，並登入成功彈出歡迎資訊這一全部過程，並且你可以重複播放這個動畫。CSS3的確很強大，尤其在動畫方面，CSS3非常不錯。

線上演示 原始碼下載

以上就是9款完美體驗的HTML5/jQuery應用，歡迎收藏分享。

本文作者：html5tricks – 超人