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

最新推荐文章于 2024-07-16 17:18:30 发布
最新推荐文章于 2024-07-16 17:18:30 发布
阅读量3k 收藏 53
点赞数 3
文章标签： vue css js java javascript
原文链接：https://mp.weixin.qq.com/s?__biz=MzIxMjExNzQxMQ==&mid=2247488261&idx=2&sn=edcd628180848b024289c5f5160e805a&chksm=974ba1c9a03c28df3387decd814b6b5f6681a127ab7b783e5a6bff803d0a3b5035dd6a981e99&scene=126&&sessionid=0
版权

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

今天来推荐几个炫酷的开源 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

前端点线面
关注
  • 3
    点赞
  • 踩
  • 53
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Popmotion轻量级动画（一）
chendm_dage
05-22 1979
导言 Popmotion是一款轻量级动画库，它在2017年火得一塌糊涂,so,开始我们的popmotion之旅吧，具体动画体验可以去官网demo，这里主要讲述popmotion方法和原理 Actions and reactions&lt;行为操作和反应&gt; 新手教程里面说到的tween方法，是作为一个action返回的 Popmotion是一个响应式的组件库，并且action是一个创建...
17个提升用户体验图像特效库，学习前端开发只要这些东西
03-18 877
纯CSS3鼠标滑过图片效果动画库，44种鼠标滑过效果是一款让图像跟随鼠标产生微妙立体倾斜效果的插件，使其有层次感和深度感。是一款实用纯js制作的图片放大镜插件。它有以下一些特定：可以使用鼠标滚轮放大缩小图片。可以通过js或data属性来设置选项。一次调用可以附加多张图片。用户可以自定义鼠标进入、离开、移动事件。加载大图片时可以显现等待文本。通用的withReact示例应用程序与 Web。iOS和Android实现一起运行一个代码库( 一些特定的代码被设计成在平台上创建不同的UI )。
4个好用的前端库——【瞬间美化项目】
weixin_51331210的博客
10-02 875
💴哈喽，大家好丫，你们的小郭子又来啦 ~ 话不多说，直接上干货，嘻嘻嘻 ~
推荐一款创新的JavaScript库：Granim.js
gitblog_00016的博客
05-11 387
推荐一款创新的JavaScript库：Granim.js 项目地址:https://gitcode.com/sarcadass/granim.js 项目介绍 在当今的网页设计中，渐变色彩已经成为了一种流行的视觉元素，它能够为网站增添丰富的层次感和动感。Granim.js，由Sarcadass开发，是一款轻量级的JavaScript库，专用于创建流畅且交互式的梯度动画效果。通过简单的API，你就能轻...
lax.js：简单且轻巧（压缩后<4kb）的香草JavaScript库，可在您滚动时创建流畅且精美的动画
02-05
lax.js 简单，轻巧（压缩后的<4kb）香草JavaScript库，可在您滚动时创建流畅且精美的动画。 Lax.js 2.0的新功能 Lax.js 2.0已完全重写，着重于模块化和灵活性，为您提供了更多工具来创建出色的动画。 新JavaScript动画语法，允许使用更高级的效果组合 使用任何值来驱动动画，例如鼠标位置，一天中的时间..，当然还有滚动！ 滚动时可以赋予动画惯性 创建自定义CSS绑定 动画放松 以及更多.. 例子 文献资料 1.入门 2.更深入 3.词汇表 入门 NPM设定 # https://www.npmjs.com/package/lax.js npm inst
九个前端神奇库，让你的前端项目瞬间美化，甲方看了都落泪
热门推荐
来自上海的这位朋友
09-05 1万+
九个前端神奇库，让你的前端项目瞬间美化，甲方看了都落泪
这里推荐几个前端动画效果网站
T3165919332的博客
06-09 6909
6. Magic AnimationsMagic Animations 是一个 CSS 动画效果代码片段收集库,里面包含注意动画、淡入动画、旋转动画等近百种动画效果,图像清晰易懂。7. Anime.jsAnime.js 是一个轻量级的 JavaScript 动画库,具有简单易用、高性能和灵活定制等特点,可以用于 CSS、SVG 和 DOM 元素的动画。3. Framer MotionFramer Motion 是一款功能强大的动画和拖拽库,用于创建网站和应用程序的交互式动画/拖拽体验。
分享35个第三方动画库 , 总有一款你想要的
大白兔奶糖的博客
08-17 1564
分享32个第三方动画库 , 总有一款你想要的
HTML炫酷的前端登录页面
05-03
在创建炫酷的前端登录页面时，以下几个重要的知识点是必须掌握的： 1. **响应式设计**：现代网页需要适应不同设备的屏幕尺寸，如手机、平板电脑和桌面电脑。使用媒体查询（Media Queries）和流式布局（Flexbox或...
大气炫酷前端设计前端模板
06-01
结合“大气炫酷前端设计前端模板”的文件名，我们可以推断这个压缩包内包含了一个完整的HTML5前端模板项目，可能包含HTML文件、CSS样式表、JavaScript脚本，以及可能的图片、图标和其他资源文件。下载后，开发者可以...
前端的一个网页 但是很炫酷
06-10
在本篇文章中，我们将深入探讨如何构建一个既炫酷又实用的前端网页。 首先，我们需要了解前端的基本构成：HTML（超文本标记语言）、CSS（层叠样式表）和JavaScript。HTML是网页内容的骨架，负责组织文本、图片等...
web端炫酷的30个前端动态加载页
10-09
本文将深入探讨“web端炫酷的30个前端动态加载页”所涉及的技术点，包括HTML、HTML5、小程序以及前端代码实践。 首先，HTML是网页的基础语言，它定义了网页的结构。在这些动态加载页面中，HTML5的引入提供了更多...
抖音炫酷时钟前端源码.zip
07-02
【抖音炫酷时钟前端源码.zip】是一个包含有炫酷特效的时钟应用，它以抖音风格设计，能够实时显示当前时间，并且具有动态轮盘式的转动效果，为用户的电脑桌面增添了一份科技感和趣味性。这个项目是前端开发的成果，...
Popmotion简介：补间
代码教主
06-20 922
Popmotion是功能性JavaScript动画库。 与诸如GreenSock或Anime.js之类的其他库相比，Popmotion是低级且不受限制的。 它将大量功能（如弹簧物理特性和指针跟踪）打包到一个非常小的文件大小（11.5kb）中。 它允许开发人员使用简单的函数编写自己的功能，而不必等待库作者添加它们。 这也意味着对3D对象，图表或React组件进行动画处理就像对DOM或...
前端实现炫酷动效_超级绚丽，20款前端动画特效，轰炸你的眼睛
weixin_39717110的博客
12-19 4562
前言HTML5一个相当出色的web技术，它不仅可以让你更加方便地操纵页面元素，而且可以通过canvas实现更多的动画特效，引进HTML5标准后，CSS3也就可以发挥更大的作用。本文主要介绍了一些基于HTML5 Canvas的动画特效，分享给大家，希望大家喜欢。1、HTML5 Canvas画板画图工具 可定义笔刷和画布HTML5 Canvas还有一个比较实用的应用，那就是网络画板，这样我们就可以在网...
GreenSock (TweenMax) 极简入门指南
weixin_34221332的博客
11-16 1181
最近把GreenSock的一些知识以及一些开发技巧使用gitbook整理了一本在线的电子书，GreenSock电子书可以去看看，下面是一个基本入门的简化版本，更详细的可以去看在线的版本，里面有详细的介绍以及一些高级应用技巧，GreenSock电子书 今天就来开始学习下牛逼的javascript动画库GASP(greensock)。 Gre...
10个前端动画库让你的交互更加炫酷
BYGFJ的博客
03-02 7953
Animate.css animate.css 是一个使用CSS3的animation制作的动画效果的CSS集合，里面预设了很多种常用的动画，且使用非常简单。 GitHub：github.com/animate-css… Hover.css Hover.css 是一套基于 CSS3 的鼠标悬停效果和动画，这些可以非常轻松的被应用到按钮、LOGO 以及图片等元素。所有这些效果都是只需要单一的标签，必要的时候使用 before 和 after 伪元素。因为使用了 CSS3 过渡、转换和动画效果，因此
Web前端-Web开发CSS基础6-弹性盒子
最新发布
a15735748145a的博客
07-16 1341
10. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。11. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。12. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。
你能用Pycharm写一个炫酷的爱心代码吗？我要全部代码
04-12
当然可以，以下是能够在Pycharm中运行的炫酷的爱心代码： ```python import turtle # 设置画布大小 turtle.setup(width=800, height=500) # 设置画笔颜色、粗细、速度 turtle.color('#FF69B4') turtle.pensize(5) turtle.speed(1) # 绘制爱心 turtle.up() turtle.goto(0,200) turtle.down() turtle.begin_fill() turtle.goto(-175,75) turtle.goto(-175,-75) turtle.goto(0,-200) turtle.goto(175,-75) turtle.goto(175,75) turtle.goto(0,200) turtle.end_fill() # 写字 turtle.up() turtle.goto(-100,0) turtle.down() turtle.color('#F5FFFA') turtle.write('I Love You', font=('Arial', 40, 'normal')) # 隐藏画笔 turtle.hideturtle() # 保持窗口不关闭 turtle.done() ``` 希望您会喜欢这个爱心代码！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值