前端必备网站

秒速五厘米 2021-12-20 01:04 413阅读 0赞

1，

### [Animate.css][] ###

*  56401 ★
 *  一个跨浏览器的动效基础库，是许多基础动效的解决方案。从经典的弹跳动效到独特的扭曲动效，一应俱全。
 *  文件大小：55.2 kB.

### [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][] ###

*  3781 ★
 *  元素颤抖效果。一个疯狂摇动的动效库，包括方向（水平、上下），类型（固定、疯狂），强度（强、弱）等等
 *  动画效果非常的疯狂、独特，它并不一定适合每个网站。
 *  文件大小：78.8 kB.

### [Velocity.js][] ###

*  14692 ★
 *  一个简单易用、高性能、功能丰富的轻量级JS动画库。它能和 jQuery 完美协作，且不依赖 jQuery。
 *  支持原生js，jq，react写法，作为vue粉，失望的是，**暂时没有vue相关的插件**
 *  文件大小：34.8 kB.

### [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][] ###

*  7034 ★
 *  一个JS库，能为你提供9种标准的动效，你可以制定其中的持续时间、频率、预期尺寸和强度等数据，创造出符合物理效果的动效。

### [GSAP(GreenSock 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.][It_s Tuesday.] ###

*  371 ★
 *  “一个古怪的CSS动画库。”，里面的动效都比较“冷淡”
 *  借助这个库，你可以有效的控制页面中元素的出现和消失的方式。
 *  动画并不是那种炫酷屌炸天的，相反它们是非常微妙的，真正从美学和用户体验的层面提升整个页面的设计。
 *  动效大多以流畅和优雅著称

### [CSS Animate][] ###

*  （没找到github仓库）
 *  能让你设置更多的动效参数，比如你可以同时设置动效起始和终止状态的坐标，大小，以及透明度，能做出更复杂的动效

### [AOS][] ###

*  6613 ★
 *  更多地依赖于CSS，包含了一系列有滚动事件触发的漂亮的预定义动效。
 *  开发人员可以在向下滚动时为页面元素添加动画，然后在向上滚动时恢复之前的动画状态。这个库还附带了许多可由滚动事件触发的预定义事件

### [CSS3 Animation][] ###

*  （没找到github仓库）
 *  一个非常简单易用的动效工具，你可以在它提供的简单图形界面里，通过拖拽一些进度条来控制你的动效，生成的CSS代码会自动显示在下面的一个文本框里，你可以拷贝粘贴到你的应用中直接使用

### [Particles JS][] ###

*  15612 ★
 *  一款特定动画的JavaScript库，用于创建点和线组成的精彩动画
 *  轻量的粒子动效 JS 开源库
 *  允许开发人员切换诸如粒子的密度，颜色，不透明度，形状和大小之类的东西。但是，由于它仅适用于粒子背景，因此不适合用来创建其他类型的动画

### [Three JS][] ###

### [Single Element CSS Spinners][] ###

*  5767 ★
 *  一组非常漂亮的可用于加载中状态的CSS3动效

### [Odometer][] ###

*  6531 ★
 *  用来给数字作动效的，比如通过它你可以很好地呈现网站人数的增加，倒计时等与数字相关的动画效果

### [Wicked CSS][] ###

*  189 ★
 *  主要是基于CSS代码的，让对象进行旋转、翻转、划入等不同类型的动画效果

### [Animate Plus][] ###

*  5124 ★
 *  一个轻量级的动效库，它只有2KB，但是它有着自定义 JavaScript 动画所需的全部基本功能。
 *  可以通过npm安装

### [matter.js][] ###

*  7989 ★
 *  **吊炸天了，接近现实生活中的物理运动、碰撞、惯性动画库**

### [parallax.js][] ###

*  13601 ★
 *  这个效果也很常见，类似于视觉差效果。
 *  **官网看起来很不错**

### [DynCSS][] ###

*  486 ★
 *  用动态CSS来打造你的网页
 *  文件大小：36.5 kB

### [Favico.js][] ###

*  8150 ★
 *  可以使用视频、标志或图片来设计站点的Favicon
 *  文件大小：8.9 kB

### [Kute.js ][Kute.js] ###

*  1605 ★
 *  一个纯粹的动效引擎，拥有出色的性能。它可以兼容许多不同的浏览器，包括一些相对传统的浏览器

### [SVG.js][] ###

*  6601 ★
 *  为你提供一个更加直观的编辑SVG动效的环境。它足够小巧，语法也简单，并且提供统一的API。

### [Motion UI][] ###

*  857 ★
 *  借助SASS 来创建有趣的CSS动效。其中包含了一整套预定义的特效，可以运用到不同的HTML组件当中去。除了IE9，其他浏览器都可用。

### [WAIT! ANIMATE][WAIT_ ANIMATE] ###

*  179 ★
 *  更加轻松自如的方式来创造延时和等待的动效。通过调整控制面板上的参数，你可以创造出更加自然的效果

### [choreographer.js][] ###

*  1693 ★
 *  通过自定义参数实现对复杂动效的设计

### [sequence.js（最后维护时间4年前）][sequence.js_4] ###

*  3373 ★
 *  是一个CSS驱动下的动效框架，用来构建基于步骤的响应式的动效

### [shifty（官网感觉已经不维护）][shifty] ###

*  940 ★
 *  一款性能优异，速度够快且足够灵活的补间动画引擎，它是公认的 GreenSock 替代方案

### [bonsai.js][] ###

*  1965 ★
 *  一个用来做高级图形处理的JS库，它有着非常简单易用的API和SVG渲染器。

太多了，具体可以：https://juejin.im/post/5cc089eae51d456e7d189f9d

https://codepen.io/\#

CodePen.io是一个浏览器内编码环境，专为学习编码和快速原型创作而设计，最大限度地减少麻烦。

转载于:https://www.cnblogs.com/Knowledge-is-infinite/p/10771979.html

[Animate.css]: https://link.juejin.im?target=https%3A%2F%2Fdaneden.github.io%2Fanimate.css%2F
[Bounce.js]: https://link.juejin.im?target=http%3A%2F%2Fbouncejs.com%2F
[Anime.js]: https://link.juejin.im?target=http%3A%2F%2Fanimejs.com%2F
[Magic Animations]: https://link.juejin.im?target=https%3A%2F%2Fwww.minimamente.com%2Fexample%2Fmagic_animations%2F
[AniJS]: https://link.juejin.im?target=http%3A%2F%2Fanijs.github.io%2F
[CSShake]: https://link.juejin.im?target=https%3A%2F%2Felrumordelaluz.github.io%2Fcsshake%2F
[Velocity.js]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fjulianshapiro%2Fvelocity
[Vivus.js]: https://link.juejin.im?target=https%3A%2F%2Fmaxwellito.github.io%2Fvivus%2F
[Hover.css]: https://link.juejin.im?target=http%3A%2F%2Fianlunn.github.io%2FHover%2F
[Snabbt.js]: https://link.juejin.im?target=https%3A%2F%2Fdaniel-lundin.github.io%2Fsnabbt.js%2F
[cards]: https://link.juejin.im?target=http%3A%2F%2Fdaniel-lundin.github.io%2Fsnabbt.js%2Fcards.html
[Crazy sticks]: https://link.juejin.im?target=http%3A%2F%2Fdaniel-lundin.github.io%2Fsnabbt.js%2Fsticks.html
[Periodic table]: https://link.juejin.im?target=http%3A%2F%2Fdaniel-lundin.github.io%2Fsnabbt.js%2Fperiodic.html
[Laser words]: https://link.juejin.im?target=http%3A%2F%2Fdaniel-lundin.github.io%2Fsnabbt.js%2Fwords.html
[Dynamics.js]: https://link.juejin.im?target=http%3A%2F%2Fdynamicsjs.com%2F
[GSAP_GreenSock JS]: https://link.juejin.im?target=https%3A%2F%2Fgreensock.com%2Fgsap
[Popmotion]: https://link.juejin.im?target=https%3A%2F%2Fpopmotion.io%2F
[scrollreveal.js]: https://link.juejin.im?target=https%3A%2F%2Fscrollrevealjs.org%2F
[Lazy Line Painter]: https://link.juejin.im?target=http%3A%2F%2Flazylinepainter.info%2F
[It_s Tuesday.]: https://link.juejin.im?target=http%3A%2F%2Fshakrmedia.github.io%2Ftuesday%2F
[CSS Animate]: https://link.juejin.im?target=http%3A%2F%2Fcssanimate.com%2F
[AOS]: https://link.juejin.im?target=http%3A%2F%2Fmichalsnik.github.io%2Faos%2F
[CSS3 Animation]: https://link.juejin.im?target=https%3A%2F%2Fcss3gen.com%2Fcss3-animation%2F
[Particles JS]: https://link.juejin.im?target=https%3A%2F%2Fvincentgarreau.com%2Fparticles.js%2F
[Three JS]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fmrdoob%2Fthree.js
[Single Element CSS Spinners]: https://link.juejin.im?target=https%3A%2F%2Fprojects.lukehaas.me%2Fcss-loaders%2F
[Odometer]: https://link.juejin.im?target=https%3A%2F%2Fgithub.hubspot.com%2Fodometer%2Fdocs%2Fwelcome%2F
[Wicked CSS]: https://link.juejin.im?target=http%3A%2F%2Fkristofferandreasen.github.io%2FwickedCSS%2F%23
[Animate Plus]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fbendc%2Fanimateplus
[matter.js]: https://link.juejin.im?target=http%3A%2F%2Fbrm.io%2Fmatter-js%2F
[parallax.js]: https://link.juejin.im?target=http%3A%2F%2Fmatthew.wagerfield.com%2Fparallax%2F
[DynCSS]: https://link.juejin.im?target=https%3A%2F%2Fwww.vittoriozaccaria.net%2Fdyn-css%2F
[Favico.js]: https://link.juejin.im?target=http%3A%2F%2Flab.ejci.net%2Ffavico.js%2F
[Kute.js]: https://link.juejin.im?target=http%3A%2F%2Fthednp.github.io%2Fkute.js%2F
[SVG.js]: https://link.juejin.im?target=https%3A%2F%2Fsvgjs.com%2Fdocs%2F2.7%2F
[Motion UI]: https://link.juejin.im?target=http%3A%2F%2Fzurb.com%2Fplayground%2Fmotion-ui
[WAIT_ ANIMATE]: https://link.juejin.im?target=http%3A%2F%2Fwaitanimate.wstone.io%2F%23!%2F
[choreographer.js]: https://link.juejin.im?target=https%3A%2F%2Fchristinecha.github.io%2Fchoreographer-js%2F
[sequence.js_4]: https://link.juejin.im?target=http%3A%2F%2Fwww.sequencejs.com%2F
[shifty]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fjeremyckahn%2Fshifty
[bonsai.js]: https://link.juejin.im?target=https%3A%2F%2Fbonsaijs.org%2F