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

今天要分享給大家的是9款完美體驗的HTML5/jQuery應用,這些基于HTML5和jQuery的應用都比較實用,而且也相對比較華麗,當然,這需要你使用支持HTML5的瀏覽器,一起來看看。

  1、jQuery動畫圖標菜單導航 仿蘋果樣式

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

jquery-icon-animated-menu

  2、jQuery仿蘋果樣式焦點圖插件

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

jquery-apple-image-slide

  3、jQuery 3D圖片滑塊焦點圖插件

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

jquery-3d-adaptor

  4、CSS3分享按鈕動畫特效

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

css3-share-button-animation

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

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

jquery-animated-progress-bar

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

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

bootstrap-css3-ui-framework

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

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

html5-css3-image-hover-effect

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

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

css3-ver-progressbar-number

  9、CSS3登錄表單動畫 可自動輸入登錄信息

  這是一款可自動輸入登錄信息的CSS3登錄表單動畫,這個動畫模擬了用戶從表單輸入登錄信息,點擊登錄按鈕,并登錄成功彈出歡迎信息這一全部過程,并且你可以重復播放這個動畫。CSS3的確很強大,尤其在動畫方面,CSS3非常不錯。

css3-auto-login-form-animation

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

  本文鏈接://www.html5tricks.com/9-well-experience-html5-jquery.html

  本文作者:html5tricks – 超人


上一篇: Android應用:社會化授權登錄及分享安全漏洞

下一篇: Android上的Chrome Canary

分享到: 更多
nba本土投注量cc指数 福建时时开奖规则 重庆时时彩开奖APP 广东时时骗局 三分钟pk10全天计划 七星彩新手玩法技巧大全 彩3彩计划软件下载 12选五技巧 复式6码二中二多少组 在线二十一点手机游戏 欢乐二人斗地主新版 时时彩个位单双 北京pk10怎么玩才赢 最准确双色球选号技巧 破解大发快三计划软件免费 六肖赔多少