前端css,js 特效框架,总有一款你喜欢的

Animate.css

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

GitHub:[github.com/animate-css…](GitHub - animate-css/animate.css: 🍿 A cross-browser library of CSS animations. As easy to use as an easy thing.
)

Hover.css

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

Github:github.com/IanLunn/Hov…

move.js

一个小型的 JavaScript 库,通过 JS 来控制一系列的 CSS 动画顺序执行,使 CSS3 动画变得非常简单和优雅。

Magic.css

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

Github:github.com/miniMAC/mag…

React Spring

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

GitHub:github.com/pmndrs/reac…

Scroll Reveal

拥有15K stars和零依赖,这个库为 web 和移动浏览器提供了简单的滚动动画,以动画的方式显示滚动中的内容。它支持多种简洁的效果类型,甚至允许你使用自然语言定义动画。这里有一个简短的 SitePoint教程(地址:www.sitepoint.com/revealing-elements-scrollreveal-js/)。

React Reveal

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

GitHub:github.com/rnosov/reac…

Greensock

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

  • 速度快,专门优化了动画性能,使之实现和css一样的高性能动画效果。
  • 轻量与模块化。模块化与插件式的结构保持了核心引擎的轻量,TweenLite包非常小(基本上低于7kb)。提供了TweenLite, TimelineLite, TimelineMax 和 TweenMax不同功能的动画模块,你可以按需使用。
  • 没有依赖。
  • 灵活控制。不用受限于线性序列,可以重叠动画序列,可以通过精确时间控制,灵活地使用最少的代码实现动画。
  • 任何对象都可以实现动画。

Github:github.com/greensock/G…

Velocity.js

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

其具有以下特点:

  • 支持客户端和服务器端使用
  • 语法是富逻辑的,构成门微型的语言
  • 语法分析和模板渲染分离
  • 基本完全支持velocity语法
  • 浏览器使用支持模板之间相互引用,依据kissy模块加载机制

GitHub:github.com/julianshapi…

Lax.js

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

GitHub:github.com/alexfoxy/la…

Rellax.js

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

Github:github.com/dixonandmoe…

three.js

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

GitHub:github.com/mrdoob/thre…

wow.js

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

GitHub:github.com/graingert/w…

AniJS

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

GitHub:github.com/anijs/anijs

Anime.js

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

GitHub:github.com/juliangarni…

Typed.js

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

GitHub:github.com/mattboldt/t…

Vivus

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

GitHub:github.com/maxwellito/…

Popmotion

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

GitHub:github.com/popmotion/p…

Granim.js

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

GitHub:github.com/sarcadass/g…

Kute.js

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

GitHub:github.com/thednp/kute…

Simple Parallax

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

GitHub:github.com/geosigno/si…

Barba.js

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

GitHub:github.com/barbajs/bar…

mo.js

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

GitHub:github.com/mojs

Particles.js

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

GitHub:github.com/VincentGarr…

tsParticles

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

GitHub:github.com/matteobruni…

Rough Notation

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

GitHub:github.com/rough-stuff…

Animate on Scroll

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

GitHub:github.com/topics/anim…

Framer Motion

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

GitHub:github.com/framer/moti…

React Motion

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

GitHub:github.com/chenglou/re…

另外两个是 CSS 技巧博客吧,也分享出来

CSS-Inspiration

PURE CSS (chokcoco.github.io)

CSS Tricks

CSS Tricks (qishaoxuan.github.io)

visualization-collection

推荐一个比较火的、前端都在使用的应用,专注于前端视觉效果的集合应用,里面包含各种丰富的css动效、canvas动画等90多个案例,而且是开源免费的。
GitHub - hepengwei/visualization-collection: 🌈 一个专注于前端视觉效果的集合应用,包含CSS动效、Canvas动画、人工智能应用等上百个案例(持续更新)
PC地址:Visualization Collection (hepengwei.cn)

国外各路大神自己实现的css特效,很有借鉴意义

3136 UI elements: CSS & Tailwind (uiverse.io)

国外一款也是比较好看的特效集合网站。内容不多,但是颜色搭配好看

Animista - On-Demand CSS Animations Library

国外一款比较专注于动画实现或者吊炸天的大型效果

Kinesis (aminerman.com)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,843评论 6 502
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,538评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,187评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,264评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,289评论 6 390
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,231评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,116评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,945评论 0 275
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,367评论 1 313
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,581评论 2 333
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,754评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,458评论 5 344
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,068评论 3 327
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,692评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,842评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,797评论 2 369
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,654评论 2 354

推荐阅读更多精彩内容