🔥🔥 试试这几个让你的项目更加炫酷的动画库

940 阅读2分钟

前言

如果你想让你的项目更加吸引用户的注意力,那么用上动画是最好的选择!

在本文中,将为您推荐几个好用,能解决日常需求的动画库。

希望对你日常开发有所帮助!

Animate.css

Animate.css是丰富的CSS动画库,该库提供了很多种CSS动画,你需要在你的项目中绑定对应的类名即可使用。

主页地址:animate.style

github仓库:github.com/animate-css…

animate.png

Three.js

Three.js是一个跨浏览器的脚本,使用 JavaScript 函数库来在网页浏览器中创建和展示动画的三维计算机图形。

主页地址:threejs.org

github仓库:github.com/mrdoob/thre…

three.png

Anime.js

主页地址:animejs.com

github仓库:github.com/juliangarni…

Anime.js是一个轻量级的JavaScript动画库,具有简单而且强大的API。它适用于CSS属性,SVGDOM属性和JavaScript对象。

anime.png

Rocket.css

主页地址:minimamente.com/example/roc…

github仓库:github.com/miniMAC/roc…

rocket动画库用于当某个物品/元素移动到另外一个位置时,创建中间这个动画过程,让元素不再是简单的移动效果。

rocket.png

Wicked.css

主页地址:kristofferandreasen.github.io/wickedCSS

github仓库:github.com/kristoffera…

wickedcss提供了一系列的动画效果,与上面的Animate.css类似,可以让你的项目中的元素加入丰富的动画效果。

wickedCSS.png

Magic.css

主页地址:www.minimamente.com/project/mag…

github仓库:github.com/miniMAC/mag…

magic是一款独特的CSS3动画特效包,你可以自由地使用在您的网页中。经gzip压缩之后仅3.1KB

magic.png

Css-loaders.css

主页地址:projects.lukehaas.me/css-loaders

github仓库:github.com/lukehaas/cs…

这是一款集合了多种loading动画效果的库,引入你的项目中,让你的项目显得既炫酷又逼格十足。

singleElementCssSpinners.png

Csshake.css

主页地址:elrumordelaluz.github.io/csshake

github地址:github.com/elrumordela…

csshake是一个很微小的动画库,该库提供了多种抖动样式也带着三种状态(鼠标经过,无限抖动,鼠标悬浮),可以轻微的晃,慢慢地抖,猛烈地抖,疯狂晃,甚至左右抖,上下抖,旋转着抖,闪烁着抖,这些抖动样式这可用于吸引用户眼球,让用户去点击它。

csshake.png