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 – 超人
相關閱讀
評論(1)