推荐一款免费强大好用的css3动画库,程序员用来做网页元素动画

2019-09-10 郑州网站建设  

身为程序员,即便你做后台系统的开发,页面效果可能没有那么高的要求,但有的时候为了增加点乐趣,加点动画效果也很不错的,当然你可以用CSS3的transition自己写,也不复杂,但有个现成直接可以用的,而且还免费,是不是更好一些,今天给大家推荐animate.css这个动画库,简单易用,很方便。

推荐一款免费强大好用的css3动画库,程序员用来做网页元素动画

第一步,引入样式文件

在head中引入animate的样式文件,中间有个min单词,十年前写js和css文件的时候还没这东西,三年前重新写的时候,突然发有的样式文件有min,查了查原来是mini的意思,压缩后的文件,这样不影响使用,但文件更小。

推荐一款免费强大好用的css3动画库,程序员用来做网页元素动画

或者你也可以使用bower和npm来安装,或者使用cdn。

推荐一款免费强大好用的css3动画库,程序员用来做网页元素动画

第二步,使用

异常的简单,在js中为你的元素加一个类就可以,animated是必须的,bounceOutLeft是可变的参数。

推荐一款免费强大好用的css3动画库,程序员用来做网页元素动画

支持的动画

看了这么多css的动画,animate支持的动画比较偏向基础的那种,

推荐一款免费强大好用的css3动画库,程序员用来做网页元素动画

使用中的问题

本来以为一个动作直接触发js中的addClass就可以了,没想到再次点就没了效果,研究了半天,原来如果要想在一个页面再次触发动作,需要把相关的class去掉,调用removeClass即可,我直接用了最笨的方案,设置了一个定时,settimeout一秒后删除想着的样式动作。

推荐一款免费强大好用的css3动画库,程序员用来做网页元素动画

彩蛋

看下面这个,another thing from Daniel Eden,然后打开它。

推荐一款免费强大好用的css3动画库,程序员用来做网页元素动画

然后你会发现,这家伙居然是facebook的设计师。

推荐一款免费强大好用的css3动画库,程序员用来做网页元素动画

后计

用了这个动画插件用了三年了,还真不知道这个的作者,还以为是个机构的出品,最近网站的主页也被更新了,其实更喜欢以前的效果。网上这类的特效很多,animate提供的样式只能算最基本的,可以配合其它css动画一起用。

小伙伴们,你们用的是哪个动画库呢?


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/1676.html转载请标明出处,谢谢合作!
标签:
  • CSS3
  • 程序员
  • 身为
  • 后台
  • 系统
  • 即便