magic动画库的使用

2017-09-23

首先是一个这个magic动画库的一个链接: magic动画库链接

这个动画库共有十二大类magic动画效果,65种小动画,在magic.css文件里设置了每一种动画的样式,实际需要的时候可以标签里添加,例如下图所示:

在magic.css文件中对各个动画animation属性中的六个值进行了总体的设置,如下图:

所以在使用这个动画库的时候,只需要在我们想实现动画效果的元素的js代码中添加className就行了,调用类名称就可以实现相应的效果,magictime是magic.css文件中的一个类,我们只需要给元素添加此类的名称就可以了。如下图;

图中的className属性里的值一个是想要实现的动画的名字,一个是animation动画属性的另外五个值的设置,所以,在执行鼠标事件的时候,元素就会实现相应的动画。