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

1.jQuery圆形旋转切换菜单 带菜单项描述

jQuery有着无数的插件,菜单插件是jQuery插件中最多的,尤其是CSS3和HTML5的配合,让jQuery菜单变得更加丰富多彩。今天我们要给大家分享一款基于jQuery的创意菜单,它是圆形旋转的菜单项,菜单项会自动切换,并在切换时在圆形中间显示当前菜单的菜单项描述信息。

jquery-circle-rotate-menu

在线演示

源码下载

2.超酷的HTML5/CSS3 3D气泡悬浮菜单

之前我们分享过各式各样的网页菜单,有基于jQuery的,也有基于HTML5和CSS3的,很多都比较炫酷和实用,比如这款jQuery 3D 垂直多级菜单就非常实用,还有这款CSS3 3D立方体菜单导航就非常炫酷和富有创意。今天我们要给大家带来另外一款超酷的HTML5 3D菜单,每一个菜单项是一个个3D样式的悬浮气泡,点击菜单项后就可以激活当前菜单。

html5-3d-bubble-menu

在线演示

源码下载

3.HTML5房屋装饰工具 自定义房屋各个部位

这是一个基于HTML5和CSS3的房屋装饰工具,工具为房屋的各个部位提供了不同的材料和颜色,点击相应的材料即可将对应部位的材料切换成所选的。这个工具有点类似人物形象换装工具,可以更换人物每个部位的穿着。另外这个工具的知识点在利用CSS3实现3D的动画特效,当你移动鼠标时你可以看到房屋的各个侧面情况。

html5-house-decorator

在线演示

源码下载

4.HTML5 Canvas 五彩发光喷泉动画

前几天我们为大家分享过一款很酷的HTML5 Canvas火焰动画,一起见证了Canvas的强大。这次要分享的这款动画也是基于Canvas实现的,它是一个五彩的发光喷泉动画特效。页面上一共有4个喷泉柱子,并且每个柱子都有在水面上的倒影,喷射出五彩斑斓的喷泉,同喷泉的颜色会随机变化,非常炫酷。

html5-canvas-fountain

在线演示

源码下载

5.jQuery头像裁剪插件 可缩放和旋转

现在可以注册的网站中,大部分都支持上传头像,记得以前我们分享过一款jQuery头像裁剪插件,非常实用。这次我们给大家带来另外一款基于jQuery的头像裁剪插件,这款插件支持自定义头像的上传,然后对头像图片进行缩放和旋转,最后选择你满意的区域即可进行裁剪操作。

jquery-avatar-cut-rotate

在线演示

源码下载

6.jQuery输入标签自动生成插件

我们在网页中发布文章的时候,经常会输入多个文章相关的标签,今天介绍的这个jQuery插件就可以帮助我们更方便地输入标签。当我们输入完标签文本后按回车或者焦点离开输入框时,输入的标签将会自动生成。同时你可以按退格键或者直接点击标签来删除生成的标签。另外插件还提供了接口让你获取生成的所有标签。在使用这款jQuery标签自动生成插件时,如果你可以增加autocomplete的功能就更强大了。

jquery-tag-generator

在线演示

源码下载

7.HTML5 Canvas雾状火焰动画

我们可以在Canvas上绘制很多图形,也可以利用HTML技术在Canvas上制作一些复杂的动画,之前我们也分享过一些基于HTML5 Canvas的火焰动画,例如这个HTML5 Canvas幻彩火焰文字特效和更早以前分享的HTML5 Canvas火焰燃烧动画。这次我们给大家带来另外一款基于HTML5 Canvas的火焰动画,你可以在Canvas画板上用鼠标点击拖动,便会形成雾状的火焰效果,火焰就像雾霾一样逐渐扩散开来。

html5-canvas-fog-fire

在线演示

源码下载

8.CSS3 3D卡片层叠动画

CSS3提供了很多属性可以实现3D效果,之前我们也分享过一些基于CSS3和HTML5的卡片动画,例如这个纯CSS3实现可感知方向的卡片翻转动画和CSS3实现答题卡片抽取切换动画。这次我们给大家带来另一款基于CSS3的卡片层叠动画,它可以让若干张卡片上下层叠起来,并且在鼠标滑过时给卡片呈现发光的效果,卡片层叠起来后给人3D立体的视觉效果。

css3-card-cascading

在线演示

源码下载

9.jQuery/CSS3 3D旋转盒子动画 可自定义封面图片

在没有CSS3之前,我们只能在网页上实现2D平面动画,但是随着CSS3技术的普及,我们可以很方便的在网页上实现一个3D立方体。今天给大家带来的便是一个基于jQuery和CSS3的3D立方体盒子,我们可以通过鼠标拖拽浏览盒子的每一个面,另外,3D盒子的面都可以自定义封面图片,你可以为每一个面选择不同的图片,并还可以自定义盒子的尺寸大小。

jquery-css3-3d-image-box

在线演示

源码下载

10.HTML5 Canvas弹性文字动画

在HTML5中,Canvas上不仅可以绘制图形和动画,还可以实现各种炫酷的文字动画特效。之前分享过一篇文章7款超华丽的HTML5 Canvas文字动画特效,其中就有不少令人惊叹的HTML5文字特效。这次我们给大家分享的也是一款基于HTML5 Canvas的文字动画,这款文字动画是将文字悬挂在富有弹性的细线上,用鼠标拖动文字即可让其在各个方向弹动。

html5-canvas-elasticity-text

在线演示

源码下载

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

赞 (17) 打赏


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

支付宝扫一扫打赏

微信扫一扫打赏