当前位置: 首页 > 科技观察

10个值得前端收藏的CSS3动效库(工具)

时间:2023-03-12 03:05:21 科技观察

现在网站和App的设计越来越注重用户体验,优秀的动效可以让你的应用更具交互性,吸引更多用户的使用。我通常会在网站上添加一些简单且一致的动画效果,我通常会使用SASS+bourbon来生成那些基于CSS3的动画效果。但是如果你对CSS3中的动态效果定义不熟练,或者想以更简单直接的方式在你的应用中引入动态效果,你可以参考并使用以下10个优秀的动态效果库(工具)。1、Animate.cssAnimate.css是我最喜欢的CSS3动画库。非常适合不熟悉CSS3动画效果,但又想给自己的网站或H5类APP引入动画效果的朋友。因为,你只需要在需要实现动画效果的元素上加上Animate.css中预定义的动画名称即可。比如常见的:bounce、flash、fadeIn、fadeOut等,加起来多达75种不同的动画效果,完全可以满足你的基本需求。当然,使用这个库也有一些注意事项。比如给元素添加动画样式后必须马上移除动画样式才能完成动画效果。另外,你还需要对动画的时长、震动幅度等做一些调整。因为,我觉得默认设置下的动画太快太猛了。Animate.css提供了详细的文档告诉您如何进行这些调整。2.Bounce.jsBounce.js是一个可以生成CSS3动态效果的小工具。它是用JavaScript编写的,并提供了一个Web界面。您可以添加一个组件,然后您可以选择包括缩放、平移、旋转、倾斜和其他动态效果。您可以选择效果类型,然后分别设置它们的参数。当您想要的效果实现后,您可以将此效果导出为CSS,以便您可以将其应用到您的应用程序中。3.CSS3AnimationCSS3Animation是一个非常简单易用的动画工具。您可以通过在它提供的简单图形界面中拖动一些进度条来控制您的动画,生成的CSS代码将自动显示在下面的文本框中,您可以将其复制并粘贴到您的应用程序中以立即使用。4.CSSAnimate如果觉得以上工具都不能做出你想要的动画,可以看看CSSAnimate工具。它允许你设置更多的运动参数,比如你可以同时设置运动开始和结束状态的坐标、大小、透明度等,这样你就可以做出更复杂的运动效果。5.MagicAnimationsMagicAnimations与Animate.css非常相似,也是一个预先定义了一系列动态效果的CSS库。但是和Animate.css最大的区别可能在于它定义的动态效果更加炫酷炫酷。如果你的网站也很潮,可以考虑使用这个CSS动态效果库。6.AniJSAniJS是由JavaScript控制的动态库。它允许您通过其链接语法定义动画。例如下面的例子:当用户点击时,这个元素会沿Y轴翻转。

7.SingleElementCSSSpinners我们经常需要一些动态效果来表示系统正在加载或者处理数据。SingleElementCSSSpinners是GitHub上的一个项目,提供了一组非常漂亮的CSS3动画,可以用来加载。8、Snabbt.jsSnabbt.js是我非常喜欢的一个动态库。它非常小,只有5K,因此可以用于移动应用程序。而且它还支持链式语法,可以轻松编写复杂的动画组合。snabbt(元素,{position:[200,0,0],easing:function(value){returnvalue+0.3*Math.sin(2*Math.PI*value);}}).snabbt({position:[0,0,0],缓动:'easeOut'});9、OdometerOdometer是用来给数字做动画的,比如通过它可以很好的呈现网站人数增加、倒计时等与数字相关的动画效果。10.Hover.cssHover.css提供大量的悬停效果,包括二维变换、图标变换、背景变换等。并且它可以应用于几乎所有的元素,包括链接、按钮、logo、SVG甚至图片等等。【本文为专栏作家“陈一禾”的原创文章。如需转载请联系作者本人(微信♂:techmask】点此查看作者更多好文