今天给大家分享一款基于jquery和css3的响应式二级导航菜单,这款导航是传统的基于顶部,鼠标经过的时候显示二级导航,还采用了当前流行的响应式设计.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="header"> <div class="logo"> <a href="#">Responsive Nav</a> </div> <nav>…

今天要给大家带来一款基于jquery带百分比的响应式进度加载条.这款加载条非常漂亮,而且带有进度的百度比,且在不同的百分比用的是不同的颜色.而且这款加载条采用了响应式设计,在不同的分辨率的显示器下完美支持.一起看下效果图吧. 在线预览   源码下载 实现的代码. html代码: <h1> Battle.net <b>style progress bar</b></h1> <div class="progress"> <b…

今天给大家分享一款基于jquery和css3的头像恶搞特效.这款实例中,一个头像在画面中跳舞,头像还有可爱的帽子,单击下面的按钮可以为头像切换不同的帽子.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="wwiaftm-container"> <div class="base wwiaftm"> <div class="body-1 wwiaftm"> <div …

之前分享了很多css3实现的按钮.今天要给大家带来一款基于jquery和css3实现的摩天轮式分享按钮.这款分享按钮页面底部有一个toggle按钮,单击该按钮,摩天轮按钮以动画的形式出现,各个分享按钮挂在摩天轮上.效果图如下: 在线预览   源码下载 实现的代码. 部分html代码: <div class="ferris-base"> <div class="ferris-base--center"> <div id="&qu…

之前已为大家介绍了好多css3实现的导航菜单.今天分享一款基于jquery滑动后固定于顶部的导航.这款导航的特点是初始位于顶部下面一百个像素,当鼠标滚动时到下方,导航一直处于顶部.效果图如下: 在线预览   源码下载 实现的代码. html代码: <h1> Scroll down</h1> <h2> And watch the menu bar</h2> <nav id="menu"> <h1 id="site…

这是一款效果炫酷的jQuery和CSS3 3D旋转画廊特效插件.该3D画廊插件可以通过前后导航按钮来切换图片,效果就像旋转木马一样.它还带有点击放大图片,显示图片标题和用键盘操作等功能. 在线预览   源码下载 简要教程 这是一款效果非常炫酷的jQuery和CSS3 3D旋转画廊特效插件.第一个DEMO是一个简单的例子,使用CSS3来制作3d旋转效果,然后用js来控制前后导航按钮.第二个DEMO是第一个DEMO的升级版,它增加了图片标题.查看图片.键盘控制等其它功能. HTML结构 这个3D画廊…

1.jQuery横向手风琴图片切换动画 之前我们为大家分享过很多款基于jQuery和CSS3的手风琴菜单和手风琴焦点图插件,比如CSS3响应式垂直手风琴菜单和jQuery横向手风琴图片展示插件.今天要介绍的也是一款基于jQuery的横向手风琴图片切换动画,鼠标滑过图片时即可展开,并且图片上方有文字标题,非常实用. 在线演示 源码下载 2.jQuery/CSS3渐变颜色拾取器 之前我们向大家分享过一款功能十分强大的jQuery颜色拾取器,支持透明度的选取.今天要为大家介绍的同样是一款基于jQuer…

2014年响应式设计成为设计主流.今天要给大家带来一款由css3和jquery实现的响应式设计导航.当显示器为pc时,导航为横条.当客户端为移动端时,呈现坚形导航.我们一起看下效果图: 在线预览   源码下载 实现的代码. html代码: <header> <nav id='cssmenu'> <div class="logo"> <a href="index.html">Responsive </a> &…

我们所生活每一天看到的新技术或新设计潮流的兴起,Web 开发正处在上升的时代.HTML5 & CSS3 技术的发展让 Web 端可以实现的功能越来越强大. 加载动画和进度条使网站更具吸引力.该进度条也会显示有价值的信息给用户,因为他们会通知用户,有一些还在进行,并要求用户耐心等待.下面是30款基于 jQuery & CSS3 的加载动画和进度条插件. Animated Progress Bars with CSS3 [ Demo | Download ] Spin JS Bar [ Dem…

今天给大家介绍一款基于jquery的下拉点击改变背景图片.单击右上角的图片,下拉显示可选择的背景图片,单击图片变为背景图.效果图下: 在线预览   源码下载 实现的代码. html代码: <a href="#" class="but"></a> <div id="hf"> <div class="con"> <img src="images/left.png&qu…