程序猿必备的12款web前端动画插件八

1.一组精美的SVG自定义单选框按钮美化插件

之前我们介绍过很多利用CSS3渲染的自定义美化单选框和复选框,比如这款jQuery超级个性化的单线框和复选框就非常不错。这次我们要分享的是一组基于SVG的自定义单选框按钮美化插件,它非常适合做一些精美的评分插件。

在线演示

源码下载

2.CSS3全屏大气手风琴图片展示插件

之前我们分享过很多基于jQuery和CSS3的手风琴插件,有手风琴菜单,比如炫酷实用的CSS3 3D垂直手风琴菜单,也有手风琴图片切换插件,比如这款jQuery垂直手风琴焦点图插件。今天我们要带来的这款是基于JavaScript和CSS3的全屏手风琴图片展示插件,点击图片时可以全屏显示大图,非常大气,适合高端产品的图片展示。

在线演示

源码下载

3.炫酷实用的jQuery/CSS3动画搜索框集合

关于网页搜索框插件,我们介绍的并不是很多,记得之前分享过有一款HTML5发光的搜索框和7组漂亮的纯CSS3搜索框还不错,大家可以先看看。今天要分享的这款基于jQuery和CSS3搜索框也非常强大,它有好几组不同的搜索框展开动画效果,可以在很多地方应用搜索功能。

在线演示

源码下载

4.纯CSS3五彩Loading加载动画

今天我们要给大家介绍一组相当漂亮的纯CSS3 Loading加载动画,这组Loading动画的风格有3种,一种是圆圈Loading动画、矩形方块Loading动画和文字Loading动画,并且Loading动画的颜色非常丰富,有一种高大上的视觉效果。另外,我们之前分享的SVG实现的一组超华丽Loading加载动画也十分不错。

在线演示

源码下载

5.CSS3太阳系各行星运行动画

这是一个基于CSS3的太阳系行星运行动画,中间是太阳,9大行星,包括行星相应的卫星,都按照自身的规律围绕太阳旋转,同时在太空中隐约模拟出许多星云,让整个动画显得更加逼真。这些动画效果都是通过CSS3动画属性实现。

在线演示

源码下载

6.纯CSS3超友爱的带小图标3D按钮

今天要给大家带来一款非常友爱的纯CSS3动画3D按钮,按钮的特点是纯CSS3实现,按钮边线衬托出3D的视觉效果。最大的特点是,我们可以在按钮两边添加非常漂亮的小图标,小图标可以让按钮的功能更加显著,而且按钮的外观也更加漂亮。

在线演示

源码下载

7.SVG木柴燃烧火焰动画

之前我们分享过一些基于HTML5 Canvas的火焰燃烧动画,比如这款HTML5动感的火焰燃烧动画特效就非常逼真。这次我们介绍另外一个基于SVG的火焰燃烧动画,不同的是,这款火焰动画是木柴燃烧时的动画效果,就像篝火晚会中的柴火一样。

在线演示

源码下载

8.SVG/CSS3平滑线性图表 可定义数据选取范围

前段时间给大家分享过很多炫酷实用的HTML5图表应用,比如这款HTML5 Canvas气温折线图表和超酷HTML5 Canvas图表应用Chart.js。今天要介绍的是一款基于SVG和CSS3的平滑线性图表,它的特点是可以通过鼠标拖动滑杆来选取需要统计的数据范围,非常实用。

在线演示

源码下载

9.jQuery/CSS3简易实用的柱形图表插件

对于柱形图表,我们之前已经分享过很多了,有基于HTML5的Canvas酷似冰山的3D柱状图表,也有基于CSS3的3D立体柱状图表演示动画。这次我们要带来的是一款基于jQuery的简易实用柱形图表插件,它可以根据配置数据自动生成图标,并且鼠标滑过图表项时显示当前项的数值。

在线演示

源码下载

10.纯CSS3背景变幻的分享按钮组合

这是一款相当实用而且美观的纯CSS3分享按钮组合,它的特点是当鼠标滑过按钮时,按钮的背景将会出现多边形变幻的动画效果,同时分享按钮的Logo也会放大显示。类似这种鼠标滑过动画的分享按钮还有很多,比如之前介绍的CSS3社会化分享图标 可旋转和悬停也非常炫酷。

在线演示

源码下载

11.超炫的SVG/CSS3游乐园动画

这是一款基于SVG和CSS3的游乐园动画,每一个细节都表现得非常不错。游乐园的各项活动设备都采用SVG的路径来描述的,并没有使用任何图片。同时游乐园中的摩天轮动画和气球漂浮动画都采用CSS3实现,看起来非常不错,和之前分享的SVG过山车动画非常类似。

在线演示

源码下载

12.纯CSS3下拉菜单导航 多种下拉弹出动画

之前我们分享过非常多的jQuery/CSS3下拉菜单插件,有些非常实用,比如这款HTML5/CSS3水平二级下拉菜单,也有的非常炫酷,比如这款jQuery/CSS3波浪形弹性下拉菜单。今天我们要介绍的是另外一款下拉菜单导航,它是纯CSS3实现,其特点是简单易用,并且支持多种下拉弹出动画,非常不错,大家可以下载源码试试。

在线演示

源码下载

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

赞 (9) 打赏


觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏