那些前端的特效(装哈哈神器)
Animate.css
Bounce.js
- 5754 ★
- 可以直接在浏览器中进行设计和设置的动画库,带有一个完整的网页构建器,只需添加一个组件,选择预设,然后你就可以得到CSS 代码了
- 和其他的同类工具不同的地方在于,它不仅仅是一个库,而是有这用户可以直接操作的实际功能,它带有一个完整的网页构建器。Bounce.js 是为数不多的可以直接在浏览器中进行设计和设置的动画库之一。
- 文件大小:16 kB.
Anime.js
- 21084 ★
- 支持 CSS,DOM,SVG,和JS对象
- 点击Documentation,查看animejs的动效组件说明文档;点击Codepen,进入anime的动效库,查看可编辑的动效演示和示例。
- 将动画加持在LOGO、按钮、图像等各种各样的元素上。它支持各种常见的触发机制,比如点击、悬停、滑动,你可以借助它定义一系列的动画。
- 缺少自定义特效
- 作为Three JS的潜在替代方案
Magic Animations
- 5754 ★
- 与Animate.css十分类似,也是一个预定义了一系列动效的CSS库。但与Animate.css的最大区别可能是,它定义的那些动效更炫也更酷一些
- 许多基于CSS3的动画效果,并且带有许多在别的地方根本找不到的自定义样式。这是一个非常大的CSS3代码库合集
- 文件大小:36.5 KB.
AniJS
- 3427 ★
- 通过JavaScript控制的动效库
- 号称“无需编码即可提升网页设计的图书馆”,通过 if、on、do、to 等简单的命令更加直观地处理动效还能用来控制前面 Animate.css 来创造动效。
- 文件大小:10.5 kB.
CSShake
Velocity.js
- 14692 ★
- 一个简单易用、高性能、功能丰富的轻量级JS动画库。它能和 jQuery 完美协作,且不依赖 jQuery。
- 支持原生js,jq,react写法,作为vue粉,失望的是,暂时没有vue相关的插件
- 文件大小:34.8 kB.
Mo.js
13461 ★
非常的庞大,而且它是完全为UI/UX设计而生的动效库。
Mo.JS 是模块化的,你可以轻松移除不必要的功能,确保体量合理和流畅运行
官网不能访问,作者好像不再维护了,让找其他选择。。–
作者Tweets
- GitHub-Issues
Vivus.js
- 10365 ★
- SVG动效库
- 一个轻量级的JavaScript动效库,跟Lazy Line Painter一样,它也是创建SVG路径动画的,里面有各种不同的动画可供选择,以及创建自定义脚本的选项,可以以你喜欢的任何方式绘制SVG。动画类型有延迟、同步和依次绘制三种,还有定时功能
- 没有任何依赖。除了使用SVG之外,Vivus JS还可用于创建漂亮的按钮,也有其他令人惊叹的动画可供使用。
Hover.css
- 20544 ★
- 鼠标悬浮效果。提供了大量的Hover效果,包括2D变换,图标变换,背景变换等等。而且几乎可以应用于所有元素,包括链接,按钮,logo,SVG甚至图片等等。
- 文件大小:104.2 kB.
Snabbt.js
- 5202 ★
- 只有5k,所以可以被用在移动应用中。而且它也支持链式语法,你可以很方便地写出复杂的动效组合。
- DEMO:cards、Crazy sticks、Periodic table、Laser words
Dynamics.js
GSAP(GreenSock JS)
- 7767 ★
- 可能目前最炫酷的免费动画库之一了。它运行于纯粹的 JavaScript 之上,是目前最强健的动画资源库之一。以SVG、画布元素甚至 jQuery 对象良好地协同,诸如 EaselJS 这样的库也可以和 GSAP 联动。一个强大的网页动画库。
Popmotion
- 13777 ★
- 一个只有 12KB 的 JavaScript 运动引擎,可以用来实现动画,物理效果和输入跟踪
- 一款用于UI界面的JavaScript动画库,包含了四个强大的开源工具:pose、popmotion、stylefire和framesync
- 一款与Anime JS类似的动画库,可用于创建精彩的浏览器动画。该库还具有指针跟踪,弹簧物理,3D动画等功能,并可用于创建功能型,反应型的动画。
scrollreveal.js
- 15499 ★
- 一款特定动画的JavaScript库
- 非常酷炫的进场效果。
- 创建十分酷炫的滚动特效,是一个轻量级的工具(没有任何依赖)
- 适用于DOM节点,多个容器,异步内容,并且支持3D旋转。ScrollReveal JS可能是创建滚动特效最好用的工具,它支持大量的浏览器,只要它们支持CSS Transform和CSS Transition特性。
Lazy Line Painter
- 1478 ★
- SVG动效库
- 一个用于SVG路径动画的JQUERY插件,可以使用它轻松创建SVG路径动效。在AI中输出SVG文档,上传到转换器中,它就能帮你将它处理成为动效,生成jQuery 文档。你还可以编辑代码进行微调。
It’s Tuesday.
- 371 ★
- “一个古怪的CSS动画库。”,里面的动效都比较“冷淡”
- 借助这个库,你可以有效的控制页面中元素的出现和消失的方式。
- 动画并不是那种炫酷屌炸天的,相反它们是非常微妙的,真正从美学和用户体验的层面提升整个页面的设计。
- 动效大多以流畅和优雅著称
CSS Animate
AOS
- 6613 ★
- 更多地依赖于CSS,包含了一系列有滚动事件触发的漂亮的预定义动效。
- 开发人员可以在向下滚动时为页面元素添加动画,然后在向上滚动时恢复之前的动画状态。这个库还附带了许多可由滚动事件触发的预定义事件。
CSS3 Animation
- (没找到github仓库)
- 一个非常简单易用的动效工具,你可以在它提供的简单图形界面里,通过拖拽一些进度条来控制你的动效,生成的CSS代码会自动显示在下面的一个文本框里,你可以拷贝粘贴到你的应用中直接使用
Particles JS
- 15612 ★
- 一款特定动画的JavaScript库,用于创建点和线组成的精彩动画
- 轻量的粒子动效 JS 开源库
- 允许开发人员切换诸如粒子的密度,颜色,不透明度,形状和大小之类的东西。但是,由于它仅适用于粒子背景,因此不适合用来创建其他类型的动画。
Three JS
Single Element CSS Spinners
Odometer
Wicked CSS
Animate Plus
matter.js
parallax.js
animatable
DynCSS
Favico.js
Kute.js
SVG.js
Motion UI
WAIT! ANIMATE
choreographer.js
sequence.js(最后维护时间4年前)
shifty
bonsai.js
tween.js
transit
rocket
animo.js
shift.css
saffron
cssynth
ceaser
morf.js
voxel.css
repaintless.css
mixitup
wallop
ramjet
jquery drawsvg
animatic.js
Move.js
eg.js
GFX
stylie
iconate.js
animatemate
CAAT(Canvas Advanced Animation Toolkit)(比较陈旧了)
Granim.js
animista
obnoxious.css
animatelo
foxholder
rhythm.js
colorido.js
- 7 ★
- Colorido.js 和 Granim.js 非常相似,这款基于JS的插件被创造出来操控色彩相关的素材的。它能够动态地控制色调和不透明度的,不论是背景、文本、线条还是段落都在它的控制范畴以内。
barba.js
6802 ★
利用PJAX(基于Ajax 技术)来减轻用户在动效刷新时候的错位感,让容器在悄无声息之间切换。
scrollanim
scrolltrigger
force.js
rellax
tilt.js
transform-when
curve.js
animator.js
cel-animation
scrollissimo
jqclouds
color animation
flubber
3D LINES ANIMATION WITH THREE.JS
Snap.svg
Pixi.js
- 一个快速的轻量级2D动画渲染引擎。
- 主要使用webgl技术,能帮助展示、驱动和管理富有交互性的图形、制作游戏。
- 使用Javascript以及其他HTML5技术,结合PixiJS引擎,可以创建出丰富的交互式图形,跨平台的应用程序和游戏。
- 文件大小:55.2 kB.
PACE.js
WOW.js
Egret
Unity
Cocos
那些前端的特效(装哈哈神器)相关推荐
- 程序员大牛必备的装逼神器
一个牛逼的程序员,除了有牛逼的技术,还要有高逼格的风格,说白了,就和人一样,单是内在美还不行,必须外表也要美,就好比,一个乞丐,他内在美,但是全身臭气熏天,和一个老板,他不但内在美,而且一身正气.你觉 ...
- 几款黑客Geek装逼神器,打开乱按键盘就行
我们常常会在一些好莱坞电影大片里看到超级黑客高手,在电脑前轻松"黑"进别人的安全系统的场景.那纯熟自如地输入一大堆复杂的代码,不一下子就入侵/破解完成,是不是很羡慕? 其实咱们也可 ...
- C++语言标准库functional中的函数对象,绝对是装B神器~
C++语言标准库<functional>中的函数对象,绝对是装B神器~用一下,感慨万千~~~ 基本上是C++ Primer上的,show一下代码: #include <iostrea ...
- 装X神器!NuShell
来源:https://github.com/nushell/nushell 今天我要给大家介绍一个生产力工具(装逼神器)Shell,它叫Nushell,它是用Rust写的,安全性提高的同时,Bug率也 ...
- html css 圆形按钮 仿uc,10款基于jquery的web前端动画特效
1.jQuery横向手风琴图片切换动画 之前我们为大家分享过很多款基于jQuery和CSS3的手风琴菜单和手风琴焦点图插件,比如CSS3响应式垂直手风琴菜单和jQuery横向手风琴图片展示插件.今天要 ...
- 自由修改机型名称、手机型号工具-QQ微博尾巴装X神器
其实修改机型非常简单,也就是修改build.prop的model以及brand参数而已,但是把它做成工具的话会方便很多,不需要自己去敲命令去替换文件,也不需要通过RE管理器去修改文件,只需要在APP的 ...
- 装X神器微信朋友圈小尾巴
装X神器微信朋友圈小尾巴 @Author GQ 2017年01月06日 今天无意中翻了翻旧项目,发现有个装X神器-微信小尾巴 谁还没个年轻的时候,顺便重新整理了下代码, 也重温一些知识点 效果图 朋友 ...
- 微信小程序:装B神器P图修改微信流量主小程序源码下载趣味恶搞图制作免服务器域名
今天给大家带来的这一款小程序是装逼生成,趣味制图工具 该小程序免服务器和域名,低成本运营 内容丰富,搭建简单,而且更逼真哟 内涵N种模板制作,另外还可以设置推荐小程序更好的互引 简单说几个模板吧 红包 ...
- cad服务器手动改自动,手动挡改为自动挡,只需加装这“神器”老司机3000元就能...
早期人们开车注重驾驶体验会选择手动挡汽车,而如今人们的工作更加繁忙,在于城市拥堵的道路,也会选择自动挡汽车来减轻自己的驾驶负担.然而之前购买的手动挡汽车能不能经过改装来变成自动挡?这也是一个很严重的问 ...
- Eclipse 主题(Theme) 设置之程序员大牛必备的装逼神器
< 程序员大牛必备的装逼神器 > 一个牛逼的程序员,除了有牛逼的技术,还要有高逼格的风格,说白了,就和人一样,单是内在美还不行,必须外表也要美,就好比,一个乞丐,他内在美,但是全身臭气熏天 ...
最新文章
- 郭振宇计算机领域,数学实验教学中心简介
- 第二家公司Get技能总结
- 自学python还是报班-没有基础想学python为什么一定要报班?
- 【笔记】HMM在股票指数中的简单应用
- spring预加载与懒加载_通过Spring将继承树加载到List中
- Python编程从入门到实践~if语句
- java分割汉字_Java分割中英文,并且中文不能分割一半?
- 20155335俞昆《java程序设计》第十周总结
- 亲测,终于知道为什么这本 Python 书销量超过13W+!
- Git最全操作流程,抓紧收藏吧朋友,真实用
- 网站性能测试工具 webbench 的安装和使用-linux
- 【数据融合】基于matlab拓展卡尔曼滤波IMU和GPS数据融合【含Matlab源码 1600期】
- 龙卷风路径_如何设置龙卷风路径
- 软著申请说明书及源程序模板
- 使用Bartend提取K3领料数据以实现发料包装标识批量自动打印
- 我们雇佣了一只大猴子
- 计算机协会维修照片,照片门事件后,当年那个毁了陈冠希的电脑修理员,如今变成这样!...
- 中国微观企业实证研究常用指标集合(2000-2020)
- 电脑启动卡、慢,运行起来后,可能可以慢慢恢复正常问题的原因和解决方案
- 优酷视频APP的缓存视频在哪里
热门文章
- 退休手续如何办理 具体流程是什么?
- 手写一个简单的IOC容器
- 如何在EXCEL中查找多个单元格中的多个关键字,多个单元格满足多个条件的行的绿色在线工具
- java ftp服务器_Java实现FTP服务器功能实例代码
- 【小破站下载工具】Python tkinter 实现网站下载工具,所有数据一键获取
- android 布局排排,[android]如何使LinearLayout布局从右向左水平排列,而不是从左向右排列...
- 认识网络机柜布线中跳线架和配线架的用途
- AR模型(Autoregress)
- 文件管理系统php,基于thinkPHP的在线文件管理系统-文件管理系统
- 短视频去水印微信小程序源码前端+后端 短视频微信小程序去水印解析源码