程序猿必备的10款web前端动画插件四

1.超酷的jQuery/CSS3五彩环形弹出菜单

今天我们要为大家分享一款非常漂亮的jQuery/CSS3五彩环形弹出菜单,一开始菜单项都聚集在一起,并且每个菜单项都微微错开,就像一个彩色团子。点击团子后,菜单项就会以弹出的形式展开,并形成一个环形,再点击Close按钮后,菜单项又会收拢,动画效果非常酷。类似的菜单我们之前也有分享过,比如这款jQuery简易时尚的圆形展开菜单和jQuery SVG高端圆形菜单导航。

在线演示

源码下载

2.jQuery宽屏左右切换焦点图 支持鼠标拖拽切换

这是一款很实用的jQuery宽屏左右切换焦点图,该焦点图左右两侧均有一个切换箭头按钮,点击按钮可以逐一切换图片。另外,图片下方有一排圆形切换按钮,可以跳转到任意图片。这款jQuery焦点图还有一个特点是支持鼠标拖拽切换,因此适合移动设备上使用。

在线演示

源码下载

3.CSS3液体形态的Loading动画

这是一款比较特别的CSS3 Loading加载动画特效,它是一个小正方形,正方形内会产生类似液体形态的各种花样,同时花样的背景颜色也会不断变化,从而产生Loading的效果。当然我们可以在正方形内部定义其他的液体流动动画,那同样会产生另外一种Loading加载动画。

在线演示

源码下载

4.HTML5 Canvas 3D立方体波浪动画

之前我们分享过很多基于CSS3和HTML5 Cavans的3D立方体动画,有几款还是比较炫酷的,比如这款HTML5/CSS3 3D立方体拼图和这款CSS3 3D立方体图片墙 可拖拽360度旋转。这次我们要介绍的是一款基于HTML5 Canvas的3D立方体波浪动画,一个个小立方体组成一个立体面,立方体按一定数学规则上下浮动,形成了炫酷的波浪动画效果。

在线演示

源码下载

5.HTML5 Canvas 2D文字与3D图像粒子转换动画

今天我们要给大家分享一款基于HTML5的3D粒子动画,该动画主要在Canvas画布上绘制粒子形的文字和3D模型,并且实现2D粒子文字与3D粒子模型之间的转换动画。在转换过程中,粒子从被打散到重新组合,动画效果非常炫酷,并且我们可以通过鼠标滚轮来缩放3D模型。

在线演示

源码下载

6.CSS3士兵队伍整齐的步伐模拟动画

这是一款比较有趣的CSS3动画,动画中有一支士兵队伍迈着整齐的步伐,举着枪,一起向前进。这里每一个士兵人物都是通过CSS3绘制而成,当然这里每一个士兵都是一样的,因此使用同一套CSS3代码即可复制N个士兵人物。

在线演示

源码下载

7.纯CSS3绘制的可爱雪人 附雪花飘落动画

今天我们要给大家带来一款非常可爱的纯CSS3雪人动画,首先映入眼帘的是一场迷人的雪景,这里利用了CSS3的动画属性模拟了下雪的场景。同时我们又通过CSS3特性绘制了一个可爱的小雪人,胖乎乎的身体,还有双手和双脚、面部五官等都利用CSS3绘制而成。

在线演示

源码下载

8.纯CSS3实现的多层嵌套圆环Loading动画

之前我们为大家分享过一些炫酷实用的CSS3圆环形Loading加载动画,很多都是纯CSS3实现的。今天我们要分享另外一款CSS3圆环Loading动画,不同的是,这款Loading动画是多层嵌套圆环形的,每一层都有不同的样式,看上去更加华丽,由于是纯CSS3实现,因此整个Loading动画表现得非常流畅,使用也比较简单。

在线演示

源码下载

9.多组超具创意的CSS3开关切换按钮

前不久我们刚刚为大家分享过一款超清新的纯CSS3自定义Checkbox开关,非常简洁美观。今天我们要继续为大家介绍多组超具创意的CSS3开关切换按钮,一共有8款漂亮的样式。这种纯CSS3开关切换按钮非常适合一些个性化比较强的表单页面中使用。

在线演示

源码下载

10.CSS3 3D鼠标滑过翻转按钮

之前我们分享过很多基于CSS3和jQuery的翻转按钮,比如这款纯CSS3带图标的3D旋转立方体链接和别具创意的CSS3鼠标悬停翻转按钮都非常不错。今天要给大家带来另外一款基于CSS3的鼠标滑过翻转按钮,按钮有平面翻转动画,也有3D立体翻转动画。

在线演示

源码下载

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

赞 (8)