9款完美体验的HTML5/jQuery应用

冷不防 2022-05-26 09:14 140阅读 0赞

今天要分享给大家的是9款完美体验的HTML5/jQuery应用，这些基于HTML5和jQuery的应用都比较实用，而且也相对比较华丽，当然，这需要你使用支持HTML5的浏览器，一起来看看。

## 1、jQuery动画图标菜单导航 仿苹果样式 ##

这次要分享的这款[jQuery插件][jQuery]非常酷，它是一款带有动画按钮的jQuery菜单插件。而且从菜单的外观上来看，有点苹果菜单风格的味道。当我们将鼠标滑过菜单项时，即会有对应的图片悬浮到菜单项上面，效果非常不错的jQuery菜单。

[![jquery-icon-animated-menu][]][jquery-icon-animated-menu 1]

[在线演示][jquery-icon-animated-menu 1] / [源码下载][Link 1]

## 2、jQuery仿苹果样式焦点图插件 ##

这次我们要分享的这款jQuery焦点图非常特别，它的外观特别简单，但是又相当大气。焦点图的整体样式是仿苹果样式的，由于jQuery的运用，我们只要点击图片下方的缩略图即可达到图片切换的焦点图特效，这款jQuery焦点图插件非常适合在产片展示的网页上使用。

[![jquery-apple-image-slide][]][jquery-apple-image-slide 1]

[在线演示][jquery-apple-image-slide 1] / [源码下载][Link 2]

## 3、jQuery 3D图片滑块焦点图插件 ##

这是一款很酷的jQuery 3D焦点图插件，和之前分享的jQuery焦点图不同的是，这款焦点图插件的图片切换播放样式是3D的，图片就像立方体一样可以上下翻滚，同时你不仅可以点击焦点图的左右切换按钮，也可以通过图片下方的小按钮进行图片切换。

[![jquery-3d-adaptor][]][jquery-3d-adaptor 1]

[在线演示][jquery-3d-adaptor 1] / [源码下载][Link 3]

## 4、CSS3分享按钮动画特效 ##

这是一款基于CSS3的社会化分享按钮，按钮非常简单，提供了分享到twitter、facebook、youtube等大型社交网站。每一个分享按钮都有个大社交网站的Logo图标，并且在鼠标滑过这些按钮时，利用CSS3的动画特性出现滑动的动画效果。

[![css3-share-button-animation][]][css3-share-button-animation 1]

[在线演示][css3-share-button-animation 1] / [源码下载][Link 4]

## 5、jQuery动画进度条 实时显示进度百分比 ##

这是一款基于jQuery的进度条插件，这款进度条插件在显示进度条的时候出现很不错的动画效果，另外，进度条在更新进度时也将实时显示进度数字百分比。进度条结束时，会显示完成字样。由于是基于jQuery的，所以这款进度条基本兼容所有浏览器。

[![jquery-animated-progress-bar][]][jquery-animated-progress-bar 1]

[在线演示][jquery-animated-progress-bar 1] / [源码下载][Link 5]

## 6、基于Bootstrap和CSS3的响应式UI框架 ##

还记得之前我们分享过的[Metro扁平化风格的jQuery UI组件][Metro_jQuery UI]么，看上去是不是非常清新和绚丽？今天我们要来分享一组基于Bootstrap和CSS3的响应式UI框架，这个UI框架中，包含了自定义CSS3按钮、自定义CSS3复选框和单选框、自定义CSS3下拉框等等，外观非常漂亮。

[![bootstrap-css3-ui-framework][]][bootstrap-css3-ui-framework 1]

[在线演示][bootstrap-css3-ui-framework 1] / [源码下载][Link 6]

## 7、HTML5/CSS3鼠标滑过图片滤镜动画效果 ##

以前我们用CSS的滤镜属性来对图片做特殊的效果处理，比如阴影、模糊等。今天我们用[HTML5][]和CSS3来实现图片的特效处理，当我们将鼠标滑过图片时，即会出现很不错的图片动画特效，像淡入淡出、放大缩小、百叶窗遮罩等HTML5特效。

[![html5-css3-image-hover-effect][]][html5-css3-image-hover-effect 1]

[在线演示][html5-css3-image-hover-effect 1] / [源码下载][Link 7]

## 8、CSS3垂直进度条动画 数字百分比显示 ##

这次我们要来分享一款CSS3进度条动画，这款进度条是垂直放置的，在进度加载的时候，进度条的背景会出现一个快速移动的箭头动画，并且随着进度条的移动，数字百分比也将随着进度实时更新，直至进度完成，完成后进度条颜色由红色编程绿色。

[![css3-ver-progressbar-number][]][css3-ver-progressbar-number 1]

[在线演示][css3-ver-progressbar-number 1] / [源码下载][Link 8]

## 9、CSS3登录表单动画 可自动输入登录信息 ##

这是一款可自动输入登录信息的CSS3登录表单动画，这个动画模拟了用户从表单输入登录信息，点击登录按钮，并登录成功弹出欢迎信息这一全部过程，并且你可以重复播放这个动画。CSS3的确很强大，尤其在动画方面，CSS3非常不错。

[![css3-auto-login-form-animation][]][css3-auto-login-form-animation 1]

[在线演示][css3-auto-login-form-animation 1] / [源码下载][Link 9]

以上就是9款完美体验的HTML5/jQuery应用，欢迎收藏分享。

[jQuery]: http://www.html5tricks.com/category/jquery-plugin
[jquery-icon-animated-menu]: /images/20220526/f12bd2f9b5304ad0a52f9395e71511d2.png
[jquery-icon-animated-menu 1]: http://www.html5tricks.com/demo/jquery-icon-animated-menu/index.html
[Link 1]: http://www.html5tricks.com/jquery-icon-animated-menu.html
[jquery-apple-image-slide]: /images/20220526/0a7d72f0c1dc41acbcb97e1450f6f4f7.png
[jquery-apple-image-slide 1]: http://www.html5tricks.com/demo/AppleSlideshow/index.html
[Link 2]: http://www.html5tricks.com/jquery-apple-image-slide.html
[jquery-3d-adaptor]: /images/20220526/10557befc38945488368bfd00cd0fcb7.png
[jquery-3d-adaptor 1]: http://www.html5tricks.com/demo/Adaptors/index.html
[Link 3]: http://www.html5tricks.com/jquery-3d-adaptor.html
[css3-share-button-animation]: /images/20220526/78f6db4737db47ff922e8fdcd8b7c62a.png
[css3-share-button-animation 1]: http://www.html5tricks.com/demo/css3-share-button-animation/index.html
[Link 4]: http://www.html5tricks.com/css3-share-button-animation.html
[jquery-animated-progress-bar]: /images/20220526/1ea624a052a841ad8e94a83c6fc3383b.png
[jquery-animated-progress-bar 1]: http://www.html5tricks.com/demo/animated-jquery-progressbar/index.html
[Link 5]: http://www.html5tricks.com/jquery-animated-progress-bar.html
[Metro_jQuery UI]: http://www.html5tricks.com/metro-jquery-ui-plugins.html
[bootstrap-css3-ui-framework]: /images/20220526/078adb89b1d74590ace1a2b9294e06b1.png
[bootstrap-css3-ui-framework 1]: http://www.html5tricks.com/demo/jquery-css3-ui-framework/index.html
[Link 6]: http://www.html5tricks.com/bootstrap-css3-ui-framework.html
[HTML5]: http://www.html5tricks.com/
[html5-css3-image-hover-effect]: /images/20220526/170326c1b0cd4403b394b0e7d819f4a1.png
[html5-css3-image-hover-effect 1]: http://www.html5tricks.com/demo/adipoli/index.html
[Link 7]: http://www.html5tricks.com/html5-css3-image-hover-effect.html
[css3-ver-progressbar-number]: /images/20220526/84b48b2dfefb43d0a2f440e9ea415b57.png
[css3-ver-progressbar-number 1]: http://www.html5tricks.com/demo/css3-ver-progressbar-number/index.html
[Link 8]: http://www.html5tricks.com/css3-ver-progressbar-number.html
[css3-auto-login-form-animation]: /images/20220526/37e1e58331494d0ca5dace652a171e86.png
[css3-auto-login-form-animation 1]: http://www.html5tricks.com/demo/css3-auto-login-form-animation/index.html
[Link 9]: http://www.html5tricks.com/css3-auto-login-form-animation.html