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

x
用微信扫描二维码
分享至好友和朋友圈

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

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

  

  在线演示

  源码下载

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

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

  

  在线演示

  源码下载

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

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

  

  在线演示

  源码下载

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

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

  

  在线演示

  源码下载

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

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

  

  在线演示

  源码下载

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

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

  

  在线演示

  源码下载

  7.HTML5 Canvas雾状火焰动画

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

  

  在线演示

  源码下载

  8.CSS3 3D卡片层叠动画

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

  

  在线演示

  源码下载

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

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

  

  在线演示

  源码下载

  10.HTML5 Canvas弹性文字动画

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

  

  在线演示

  源码下载

特别声明:以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布,本平台仅提供信息存储服务。

Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.

跟贴 跟贴 2 参与 102
推荐
资讯
财经
科技
娱乐
游戏
搞笑
汽车
历史
生活
更多
二次元
军事
教育
健身
健康
家居
故事
房产
宠物
旅游
时尚
美食
育儿
情感
人文
数码
三农
艺术
职场
体育
星座
© 1997-2020 网易公司版权所有 About NetEase | 公司简介 | 联系方法 | 招聘信息 | 客户服务 | 隐私政策 | 广告服务 | 侵权投诉 Reporting Infringements | 不良信息举报

爱码农

专注前端开发,关注用户体验

头像

爱码农

专注前端开发,关注用户体验

82

篇文章

388

人关注

列表加载中...
请登录后再关注
x

用户登录

网易通行证/邮箱用户可以直接登录:
忘记密码