这几十个前端炫酷库你都知道吗？

茶已备好，只待君来！感谢关注 前端点线面 (>‿<），本号定期推荐原创深度好文，帮助每一位在前端领域打拼的伙伴们走向前列，此外关注我获取最前沿知识点、海量学习资料、《前端百题斩》、大量思维导图，并进前端划水交流群。

今天来推荐几个炫酷的开源 JavaScript 动画库，赶紧收藏起来吧！

1Animate.css

animate.css 是一个使用CSS3的animation制作的动画效果的CSS集合，里面预设了很多种常用的动画，且使用非常简单。

fd15227c087c2d77d4826a6e1d19886c.png

GitHub：https://github.com/animate-css/animate.css

2Hover.css

Hover.css 是一套基于 CSS3 的鼠标悬停效果和动画，这些可以非常轻松的被应用到按钮、LOGO 以及图片等元素。所有这些效果都是只需要单一的标签，必要的时候使用 before 和 after 伪元素。因为使用了 CSS3 过渡、转换和动画效果，因此只支持 Chrome、Firefox 和 Safari 等现代浏览器。

d1ea44cda27a04de3b8e34bf634b5d07.png

Github：https://github.com/IanLunn/Hover

3Magic.css

Magic CSS3 Animations 动画是一款独特的CSS3动画特效包，可以自由地使用在网页中。只需简单地在页面上引入 CSS 文件: magic.css 或者压缩版本 magic.min.css 就可以使用了。

43b7155ca60050ddee4b2f241a9c919c.png

Github：https://github.com/miniMAC/magic

4React Spring

react-spring 是一个基于弹簧物理学的动画库，满足大多数与UI相关的动画需求，提供了足够灵活的工具，可以自信地将想法投射到不断变化的界面中。该库代表了一种现代动画方法。它继承了 animated 强大的插值和性能，以及 react-motion 的易用性。

b07a5821921359155ed907ccf02a4e80.png

GitHub：https://github.com/pmndrs/react-spring

5React Reveal

React Reveal 是一个用于 React 的高性能动画库。它占用空间小，专门为 ES6 中的 React 编写。可用于创建各种炫酷的滚动效果显示。

c311753fc6b9efec05402323899adc28.png

GitHub：https://github.com/rnosov/react-reveal

6Greensock

GreenSock是一个JavaScript动画库，可轻松对HTML元素进行动画处理。用于创建高性能，零依赖性，跨浏览器动画，声称在超过 400 万个网站中使用。其具有一下特点：

  • 速度快，专门优化了动画性能，使之实现和css一样的高性能动画效果。

  • 轻量与模块化。模块化与插件式的结构保持了核心引擎的轻量，TweenLite包非常小(基本上低于7kb)。提供了TweenLite, TimelineLite, TimelineMax 和 TweenMax不同功能的动画模块，你可以按需使用。

  • 没有依赖。

  • 灵活控制。不用受限于线性序列，可以重叠动画序列，可以通过精确时间控制，灵活地使用最少的代码实现动画。

  • 任何对象都可以实现动画。

2efa6b89b08e1296245394d2dc9b4260.png

Github：https://github.com/greensock/GreenSock-JS/

7Velocity.js

Velocity.js 是velocity模板语法的javascript实现。Velocity 是基于Java的模板引擎，广泛应用在阿里集 体各个子公司。Velocity模板适用于大量模板使用的场景，支持复杂的逻辑运算，包含 本数据类型、变量赋值和函数等功能。还拥有：颜色动画、转换动画(transforms)、循环、 缓动、SVG 动画、和 滚动动画 等特色功能。Velocity.js 支持 Node.js 和浏览器环境。

其具有以下特点：

  • 支持客户端和服务器端使用

  • 语法是富逻辑的，构成门微型的语言

  • 语法分析和模板渲染分离

  • 基本完全支持velocity语法

  • 浏览器使用支持模板之间相互引用，依据kissy模块加载机制

e9f99d9655a8620cbd208a93f26212cf.png

GitHub：http://github.com/julianshapiro/velocity

8Lax.js

Lax.js 是一款原生零依赖的制作跟随页面滑动的 JavaScript 动画插件，这款插件非常的轻巧，压缩版大小只有3kb。当滑动页面时，帮助创建酷炫的动画效果，比如滚动视差、变形移动等基本的动画效果，响应式兼容方面，比如手机端也有不错的支持。除了可以使用插件默认集成的动画属性，还可以自定义更加丰富的动画属性。

b4e14424aea068082057aeeb545fdc02.gif

GitHub：https://github.com/alexfoxy/lax.js

9Rellax.js

rellax.js是一款轻量级的纯JavaScript滚动视觉差特效插件。rellax.js压缩后的版本仅871字节，在手机等小屏幕设备中，插件会自动限制视觉差特性。

99911f5bade9e15a7ec6651516a7d993.pngGithub：https://github.com/dixonandmoe/rellax

10three.js

three.js 是一个易于使用、轻量级、跨浏览器的通用 JavaScript 3D 库，它是一套基于WebGL 开发出的Javascript 函式库，它提供了比 WebGL 更简单的Javascript API，让开发者能够轻易在浏览器制作 3D 绘图。01d14f577ade2c7a1cf1428c83e60302.png

GitHub：https://github.com/mrdoob/three.js/

11wow.js

WOW.js 是一款帮助你实现滚动页面时触发CSS 动画效果的插件。它依赖 animate.css，所以它支持 animate.css 多达 60 多种的动画效果，可以改变动画设置喜欢的风格、延迟、长度、偏移和迭代等，能满足各种需求。01d313bdf9904b3f8a67f2d20fccbf41.png

GitHub：https://github.com/graingert/wow

12AniJS

AniJS允许我们为网站创建动画样式，而无需任何JavaScript或CSS编码！您可以使用简单的If - On - Do - To语法用HTML指定所有动画

b4e103220ff48fe535c72aa9b7917d02.png

GitHub：https://github.com/anijs/anijs

13Anime.js

Anime.js 是一个轻量的JavaScript 动画库， 拥有简单而强大的API。可对 CSS 属性、 SVG、 DOM 和JavaScript 对象进行动画。它很轻便，gzip压缩完只有9kb左右。

30add9909c2fab882d9917da9b9dc1ff.png

GitHub：https://github.com/juliangarnier/anime/

14Typed.js

typed.js是一个类型化库，效果是用打字机的方式显示一段话，可以自定义任何字符串、指定显示速度、指定是否循环等。

624e35fa175bb55e95a12eaddb0574b2.gif

GitHub：https://github.com/mattboldt/typed.js/

15Vivus

Vivus 是一个轻量级的 JavaScript 库（没有依赖项），它允许我们对 SVG 进行动画处理，使它们看起来像是被绘制的。它有多种不同的动画可用，以及创建自定义脚本的选项，以喜欢的任何方式绘制 SVG。

08b50b7f835c6eca9fd948c20d638a65.png

GitHub：https://github.com/maxwellito/vivus

16Popmotion

Popmotion 是一个只有12KB的 JavaScript 运动引擎，可以用来实现动画，物理效果和输入跟踪。原生的DOM支持：CSS，SVG，SVG路径和DOM属性的支持，开箱即用。

0e0da1b0e4b710613a4fe41d7cca5afe.png

GitHub：https://github.com/popmotion/popmotion

17Granim.js

granim.js是一个在网页中创建流畅的交互式流体动画的小型JavaScript库，granim.js可以实现各种想要的渐变的动画效果，使网页色彩更加丰富，视觉效果更佳！

03b511118a10b8cae26f0aa26c749f23.png

GitHub：https://github.com/sarcadass/granim.js

18Kute.js

Kute.js 是一个原生的 Javascript 动画引擎，具有优秀的性能和模块化的代码。它提供了一大堆工具，以帮助创建自定义动画。它提供了易于使用的方法来设置高性能、跨浏览器的动画。

a9e98107f663dc5ee78c82c40248c21a.png

GitHub：https://github.com/thednp/kute.js

19Simple Parallax

simpleParallax.js 是一个非常简单且小巧的 Vanilla JS 库，可在任何图像上添加视差动画。它因其易用性和可视化渲染而脱颖而出。视差效果直接应用于图像标签，无需使用背景图像。

2d9786635edebe0d776608e26a92c442.png

GitHub：https://github.com/geosigno/simpleParallax.js

20Barba.js

Barba.js是一个小（4kb的压缩和压缩），灵活和无依赖的库，可以帮助您创建流畅和平滑的过渡网站的页面。它可以减少页面之间的延迟，最大限度地减少浏览器HTTP请求并增强用户的Web体验。

e00918ce8781b1c2bc726660fa992861.png

GitHub：https://github.com/barbajs/barba

21mo.js

Mo.js是一个简洁、高效的图形动画库，拥有流畅的动画和惊人的用户体验，在任何设备上，屏幕密度独立的效果都很好，可以绘制内置的形状或者自定义形状，还可以绘制多个动画，再让它们串联在一起。

74444e9cf5e97c04672558bd087ab828.gif

GitHub：https://github.com/mojs

22Particles.js

Particles.js 一个轻量级的JavaScript库，用来在网页上创建颗粒效果。

9e52162756b1d217df75b976caec104e.png

GitHub：https://github.com/VincentGarreau/particles.js/

23tsParticles

tsParticles可以轻松创建高度可定制的粒子动画并将它们用作网站的动画背景。可用于 React.js、Vue.js（2.x 和 3.x）、Angular、Svelte、jQuery、Preact、Inferno、Solid、Riot 和 Web 组件现成的可用组件。

a1d7761afd8ad986b5a48513fcc88414.png

GitHub：https://github.com/matteobruni/tsparticles

24Rough Notation

Rough Notation是一个小型 JavaScript 库，用于在网页上创建和动画注释。它使用RoughJS 创建手绘的外观和感觉。元素可以用多种不同的样式进行注释。动画持续时间可以配置，或者只是关闭。压缩后的大小仅 3.83kb。

98684a28ed706904b093be88958d5f49.png

GitHub：https://github.com/rough-stuff/rough-notation

25Animate on Scroll

Animate on Scroll是一个在页面时创建动画的JavaScript动画库。

84526075f9e0bca15c9eae8736154250.gif

GitHub：https://github.com/topics/animate-on-scroll

26Framer Motion

Motion 是Framer的 React 的生产就绪运动库。它带来了声明性动画、轻松的布局转换和手势，同时保持了 HTML 和 SVG 语义。Motion 使用强大的手势识别器扩展了 React 的事件系统。它支持悬停、点击、平移和拖动。注意，Motion 需要 React 16.8 或更高版本。

d3401aa37a6bf84f9e8a95dd752ce626.png

GitHub：https://github.com/framer/motion

27React Motion

React Motion 是一个用于 React 应用程序的动画库，可以轻松创建和实现逼真的动画。

51a97990153aaae0db4c3f87d4e2fa65.gif

GitHub：https://github.com/chenglou/react-motion

················ 执鸢者简介 ·················

大家好，我是执鸢者，毕业于华中科技大学，新时代农民工，现在是百度前端研发工程师，著有《前端百题斩》、数十篇学习思维导图（go、React、Redux、Vue、Vuex、操作系统、Linux、设计模式、js、webpack、nginx）以及大量前端进阶文章，大量同学已通过号主的系列内容获取心仪的offer，关注我获取海量资料、交流工作心得并进卧虎藏龙交流群。

59ac2b062361c989cdb1c797be197eb3.png

识别上方二维码加我微信、拉你进交流群

368e396a603dfece7e9ad06cba32b6c2.png

[1] 五万字前端面试宝典

[2] 纯CSS实现beautiful按钮

[3] 一张思维导图入门React

[4] 一文搞定Diff算法

[5] 16张图入门Nginx

[6] 好记性不如烂笔头——Vue3.0篇

[7] 好记性不如烂笔头——Vuex篇

[8] 好记性不如烂笔头——Linux篇

[9]好记性不如烂笔头——React篇

[10] 好记性不如烂笔头——Redux篇

f5aed451553d7cd68e051f0495e8efb9.png

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://xiahunao.cn/news/1619764.html

如若内容造成侵权/违法违规/事实不符，请联系瞎胡闹网进行投诉反馈，一经查实，立即删除！

相关文章

NPM酷库：ip，IP地址处理

NPM酷库：ip，IP地址处理

NPM酷库&#xff0c;每天两分钟&#xff0c;了解一个流行NPM库。 今天我们来了解一个专门用来处理IP地址的库&#xff1a;ip&#xff0c;ip库能够获取本机IP地址、比较、转换、掩码/子网计算等各种和网络IP相关的操作&#xff1a; const ip require(ip);// 获取本机网卡IP ip.…
阅读更多...
NPM酷库：globby，增强版的glob

NPM酷库：globby，增强版的glob

NPM酷库&#xff0c;每天两分钟&#xff0c;了解一个流行NPM库。 昨天&#xff0c;我们学习了一个新库 glob&#xff0c;用于模式匹配目录文件。今天&#xff0c;我们要了解的globby&#xff0c;是基于 glob&#xff0c;并进一步得到了增强了功能。 globby 特性 相对于 glob&am…
阅读更多...
vue2 路由入门

vue2 路由入门

一、单页应用程序介绍 1.概念 单页应用程序&#xff1a;SPA【Single Page Application】是指所有的功能都在一个html页面上实现 2.具体示例 单页应用网站&#xff1a; 网易云音乐 https://music.163.com/ 多页应用网站&#xff1a;京东 https://jd.com/ 3.单页应用 VS 多页…
阅读更多...
c++ 判断基类指针指向的真实对象类型

c++ 判断基类指针指向的真实对象类型

在 c 面向对象使用中&#xff0c;我们常常会定义一个基类类型的指针&#xff0c;在运行过程中&#xff0c;这个指针可能指向一个基类类型的对象&#xff0c;也可能指向的是其子类类型的对象&#xff0c;那现在问题来了&#xff0c;我们如何去判断这个指针到底执行了一个什么类型…
阅读更多...
Markdown中的LaTeX公式详解

Markdown中的LaTeX公式详解

引言 LaTeX是一种用于排版科学和数学文档的排版系统&#xff0c;它能够以高质量的方式生成复杂的数学公式。在CSDN&#xff08;Cnblogs和CSDN&#xff09;这样的博客平台中&#xff0c;也支持使用LaTeX语法插入数学公式。本文将详细介绍在CSDN中使用LaTeX公式的方法和常用语法&…
阅读更多...
IgA | 对抗病原菌，帮助共生菌定植的“重要开关”

IgA | 对抗病原菌，帮助共生菌定植的“重要开关”

导 语&#xff1a;关于抗体&#xff0c;免疫和微生物 肠道微生物群的组成因个体而异&#xff0c;肠道微生物群中的特定细菌类群可能是某些肠内外疾病的独特有效驱动因素。对人类而言&#xff0c;精准且优先识别影响疾病易感性和严重性的细菌仍然是一项重大挑战。 很多时候我们想…
阅读更多...
医院信息系统服务器存储维护,首都医科大学宣武医院电子病历系统服务器及存储设备维护服务项目招标公告...

医院信息系统服务器存储维护,首都医科大学宣武医院电子病历系统服务器及存储设备维护服务项目招标公告...

产品介绍　　飞顿lovely AFT是一台功能全面的皮肤美容工作站&#xff0c;它应用了光子领域最前沿的技术和科学成果&#xff0c;将一个工作平台与四个光子设备对接&#xff0c;组成一个功能十分强大的光子工作站。它可独立解决皮肤美容的各种问题&#xff0c;是目前应用最广泛&a…
阅读更多...
合成生物学公司如何操纵微生物组

合成生物学公司如何操纵微生物组

来源&#xff1a;肠道产业 这是《肠道产业》第 807 篇文章 编者按 近年来&#xff0c;合成生物学领域的研究不断推进&#xff0c;许多公司纷纷出手&#xff0c;将合成生物学用于治疗各种各样的疾病&#xff0c;包括靶向微生物组。那么有哪些在微生物组领域探索的合成生物学公司…
阅读更多...
相机下载_美颜轻相机最新版下载-美颜轻相机app下载v1.70206 安卓版

相机下载_美颜轻相机最新版下载-美颜轻相机app下载v1.70206 安卓版

美颜轻相机app是一款超棒的美颜相机工具。专业的实时相机&#xff0c;大量的各种滤镜挑选&#xff0c;丰富智能的功能拍照&#xff0c;完美的拍出你喜欢的效果&#xff01;还能自由补光&#xff0c;延迟拍照等等&#xff0c;功能强大&#xff01; 美颜轻相机最新版介绍 【魅力彩…
阅读更多...
体内湿气重怎样祛除

体内湿气重怎样祛除

1.如何判断自己身体是否有湿&#xff1f; 1.头发爱出油 2.面部油亮 3.睡觉留口水 &#xff08;湿气饱和自行流出&#xff09; 4.排便粘稠&#xff08;不易冲掉&#xff09;且多便。 5.小肚子大 6.耳内湿&#xff08;耳禅湿&#xff09;7.阴部潮湿。 湿是如何形成的&#xff1…
阅读更多...
springboot整合rabbitmq死信队列

springboot整合rabbitmq死信队列

springboot整合rabbitmq死信队列 什么是死信 说道死信&#xff0c;可能大部分观众大姥爷会有懵逼的想法&#xff0c;什么是死信&#xff1f;死信队列&#xff0c;俗称DLX&#xff0c;翻译过来的名称为Dead Letter Exchange 死信交换机。当消息限定时间内未被消费&#xff0c;…
阅读更多...
Linux网络编程经典书籍推荐

Linux网络编程经典书籍推荐

Linux网络编程经典书籍推荐 目录(?)[] 首先要说讲述TCP/IP的书很多&#xff0c;其中有3泰书很全。 分别是《TCP/IP详解》三卷本&#xff0c;《用TCP/IP进行网际互连》三卷本&#xff0c;《TCP/IP指南》《IPv6》四卷本 其中TCP/IP详解的作者还写了另外2本经典著作&#xff0c;《…
阅读更多...
网络编程学习之经典书籍推荐

网络编程学习之经典书籍推荐

网络编程学习之经典书籍推荐 TCP/IP协议卷一、二、三下载地址 程序编号&#xff1a;510 程序名称&#xff1a; 《TCP/IP详解&#xff0c;卷1&#xff1a;协议》书 pdf格式 程序类型&#xff1a;电子书 文件大小&#xff1a; 13000 K 字节 上传时间&#xff1a;2003-3-18 18:07…
阅读更多...
聚类分析 | MATLAB实现基于FCM模糊C均值聚类结果可视化

聚类分析 | MATLAB实现基于FCM模糊C均值聚类结果可视化

聚类分析 | MATLAB实现基于FCM模糊C均值聚类结果可视化 目录 聚类分析 | MATLAB实现基于FCM模糊C均值聚类结果可视化效果一览基本介绍程序设计参考资料 效果一览 基本介绍 FCM模糊C均值聚类&#xff0c;聚类结果可视化&#xff0c;MATLAB程序。 FCM&#xff08;Fuzzy C-Means&a…
阅读更多...
基于适应度相关算法优化的BP神经网络（预测应用） - 附代码

基于适应度相关算法优化的BP神经网络（预测应用） - 附代码

基于适应度相关算法优化的BP神经网络&#xff08;预测应用&#xff09; - 附代码 文章目录 基于适应度相关算法优化的BP神经网络&#xff08;预测应用&#xff09; - 附代码1.数据介绍2.适应度相关优化BP神经网络2.1 BP神经网络参数设置2.2 适应度相关算法应用 4.测试结果&…
阅读更多...
渗透测试工具ZAP入门教程（3）-扫描流程

渗透测试工具ZAP入门教程（3）-扫描流程

使用ZAP扫描网站流程如下&#xff1a; 1&#xff09;、输入URL&#xff0c;点击启动浏览器&#xff0c;在打开的浏览器登录要扫描的网站&#xff0c;操作页面各种功能&#xff0c;尽可能遍历所有功能及页面 2&#xff09;、点击Spider Start按钮&#xff0c;爬取静态地址&…
阅读更多...
HandlerMethod类源码解析

HandlerMethod类源码解析

HandlerMethod类用于封装控制器方法信息&#xff0c;包含类信息、方法Method对象、参数、注解等信息&#xff0c;具体的接口请求是可以根据封装的信息调用具体的方法来执行业务逻辑&#xff1b; HandlerMethod有三个子类分别是InvocableHandlerMethod、ServletInvocableHandler…
阅读更多...
Spring MVC 学习总结

Spring MVC 学习总结

学习目标 了解 Spring MVC 是什么&#xff0c;为什么要使用它或者说它能解决什么问题&#xff0c;其与 Spring 是什么关系。理解为什么配置 Spring MVC 的前端控制器的映射路径为 “/” 会导致静态资源访问不了&#xff0c;掌握怎么处理这个问题。掌握基于注解方式使用 Spring…
阅读更多...
java反射之Method的invoke方法实现

java反射之Method的invoke方法实现

在框架中经常会会用到method.invoke()方法&#xff0c;用来执行某个的对象的目标方法。以前写代码用到反射时&#xff0c;总是获取先获取Method&#xff0c;然后传入对应的Class实例对象执行方法。然而前段时间研究invoke方法时&#xff0c;发现invoke方法居然包含多态的特性&a…
阅读更多...
java method方法_java入门(六) | 方法(Method)的定义和使用

java method方法_java入门(六) | 方法(Method)的定义和使用

上一期是对java的分支结构进行讲解和实练，分支结构有if 、if(判断语句..){满足条件的代码...}else{不满足的代码}、else if以及switch case，你对他们有理解的怎样呢？ 这一期是对方法method的介绍，它也被称之为函数，它的基本格式为： 方法的修饰符 方法的返回值 方法的名字…
阅读更多...
最新文章

Copyright @ 2022~2023