程序猿必备的15款web前端动画插件七

1.超简易的SVG/CSS3 Loading加载动画图标

今天我们要为大家分享一组非常简易的SVG/CSS3 Loading加载动画图标，和之前分享的SVG实现的一组超华丽Loading加载动画相比，这组Loading动画更见简单，它主要由圆环形和柱形两种样式组成，可以将这些Loading图标应用在很多种类型的页面中，非常实用。

在线演示

源码下载

2.jQuery左右切换焦点图插件 3D阴影相框

这是一款相对比较简单而实用的jQuery焦点图应用，它的特点是左右切换按钮悬浮在图片右下角，点击切换按钮即可让图片进行左右平移地切换，效果着实是简单，但是个人觉得很实用。另外还有一个特点是，这款jQuery焦点图插件带有3D阴影的相框，从而简单中稍带一点点华丽。

在线演示

源码下载

3.jQuery层叠图片细节对比插件

之前我们分享过几款比较实用的图片对比插件，比如这款JavaScript图片拖动对比 实现图片差异定位就非常强大，可以左右滑动。今天我们要介绍的这款jQuery层叠图片细节对比插件功能也比较实用，可以通过鼠标滑动图片上方的滑杆来对比两张图片的细节。

在线演示

源码下载

4.jQuery自定义美化Select下拉框插件

之前我们分享过很多款非常漂亮而且实用的jQuery美化版Select下拉框插件，比如jQuery Select下拉框美化插件 菜单淡如淡出动画和漂亮实用的Select下拉框美化插件Tether都非常不错。今天我们要给大家介绍另一款基于jQuery的自定义美化Select下拉框插件，它的配置十分简单，引用插件库后用几行jQuery代码初始化即可。

在线演示

源码下载

5.纯CSS3实现的蒙娜丽莎画像

蒙娜丽莎画像非常著名，如果告诉你这幅画像我们可以使用纯CSS3绘制而成，你是否会觉得非常惊讶。没错，今天我们要分享的就是这个使用纯CSS3，没有使用任何图片的蒙娜丽莎画像，实现原理是利用CSS3的阴影特性，逐层用不同的颜色渲染，从而形成这幅蒙娜丽莎巨作，当然有点模糊是肯定的，毕竟是通过投影渲染的，是不是觉得非常神奇。

在线演示

源码下载

6.CSS3社交关系网模拟动画

这次我们要给大家分享一款CSS3模拟社交关系网的动画特效，社交网的中心是用户的头像图片，由中心连线展开到各个社交网络的Logo图片，同时每一条连接线上面都会有一个圆点由中心向各个节点移动，形成关系网的模拟动画，利用CSS3，我们可以让点运动，也可以让图片变成圆形，还是比较有趣的。

在线演示

源码下载

7.CSS3自定义菜单内容的二级下拉菜单

之前我们分享过很多基于jQuery和CSS3的二级下拉菜单，大部分都非常实用，当然也不乏炫酷的动画，比如这款HTML5/CSS3水平二级下拉菜单就比较朴实，这款jQuery/CSS3波浪形弹性下拉菜单就比较富有个性。今天我们要分享的这款CSS3下拉菜单特点在于二级下拉菜单内容可以自定义，可以是简单的多列，也可以是复杂的图文排版。

在线演示

源码下载

8.HTML5 多维度3D图片切换动画

今天我们要给大家分享一款非常特别的HTML5/CSS3焦点图插件，这款焦点图插件可以实现XY两个维度的图片切换动画，并且图片在排列时有一种3D立体的视觉效果，这样的效果正是使用了CSS3特殊属性改变了图片4条边的倾斜角度。

在线演示

源码下载

9.纯CSS3乒乓球动画

这是一个比较有意思的纯CSS3乒乓球动画特效，主要是模拟了乒乓球运动动画，画面上用CSS3绘制了一张乒乓球桌，一个乒乓球在球桌上来回运动，就好象两个运动员在打乒乓球一样。当然如果你可以在球桌两端绘制两个运动员那就更加逼真的，有兴趣的同学可以自己研究一下。

在线演示

源码下载

10.移动端可拖拽jQuery图片切换插件 带Tooltip缩略图

这是一款很特别的jQuery焦点图插件，它和其他的图片切换插件不同，它主要在移动设备上使用，因此我们并不能像其他焦点图插件那样点击切换按钮来切换图片，而是通过滑动带Tooltip外观的缩略图来切换图片，并且图片显示时采用中心放大扩散的动画特效，效果还是不错。

在线演示

源码下载

11.CSS3带数字时钟的创意圆盘时钟动画

前几天我们刚刚为大家分享过一款基于SVG和CSS3的复古圆盘时钟，大家可以在这里查看演示和这里下载源码。今天又要给大家带来另外一款CSS3圆盘时钟，它的特点是圆盘对半分，一半显示数字时钟信息，另一半是半个圆盘时钟，样式设计上非常富有创意。

在线演示

源码下载

12.精美的jQuery视差效果图片轮播插件

今天让我们给大家分享一款基于jQuery的视差效果的图片轮播插件，它与一般的jQuery焦点图插件相比，并不是图片之间的切换，而是各种网页元素悬浮在一张大背景图上，切换时背景逐渐移动，另外背景上的元素也会跟着切换，与之类似的还有一款jQuery视差效果的焦点图插件。

在线演示

源码下载

13.CSS3鼠标滑过图片覆盖渐变颜色蒙版

今天我们要介绍一款比较实用的CSS3图片特效，它并没有非常华丽的动画效果，但是很多场合都可以用到。当我们将鼠标滑过图片时，图片上方会覆盖一层渐变颜色的蒙版，移开图片蒙版又会以渐变的方式消失，同时这层蒙版由于颜色动态渐变，因此给人一种发光的视觉效果。

在线演示

源码下载

14.纯CSS3可爱笑脸开关切换按钮

近期我们集中为大家分享过很多基于HTML5和CSS3的开关切换按钮，像这款多组超具创意的CSS3开关切换按钮拥有多套风格的外观，还有这款漂亮的CSS3/SVG个性化开关按钮又非常具有创意。今天要分享的这款同样也富有创意，整个开关按钮由笑脸和哭脸组成，点击按钮后可以在笑脸哭脸之间切换，另外按钮带有阴影，看起来有3D立体的视觉效果。

在线演示

源码下载

15.纯CSS3/SVG实现的带秒针表盘圆盘复古时钟

现在的网页上圆盘时钟越来越少见了，更多的是数字时钟和数字日历。之前我们分享过一些基于jQuery和CSS3的圆盘时钟动画，比如纯CSS3 3D立体圆盘时钟动画和jQuery实现一个挂在墙上的圆盘时钟动画都非常不错。这次要给大家带来一款比较复古的圆盘时钟，基于纯CSS3，盘面是SVG绘制而成，并没有使用任何图片。时钟整体外观比较怀旧，给人不一样的视觉感受。

在线演示

源码下载

未经允许不得转载：爱前端网 » 程序猿必备的15款web前端动画插件七