php magic模版插件,magic

magic.css是一款带64种动画效果的CSS3动画库。magic.css中的动画分为12大类，全部使用CSS3 animation动画来完成。各种效果使用非常简单，只需要为元素添加和移除相应的class类即可。

安装

可以通过bower来安装magic.css动画库。

bower install magic

使用方法

使用该动画库需要在页面中引入magic.css文件。

HTML结构

你可以为一个元素设置背景图像，然后制作背景图像动画，也可以直接使元素产生动画。

制作动画

你可以动态的使用JavaScript为元素添加和移除相应的class类来产生各种元素动画效果。

$('#element').hover(function () {

$(this).addClass('magictime puffIn');

});

如果你想在一段时间之后在产生动画，可以设置一个定时器。

setTimeout(function(){

$('#element').addClass('magictime puffIn');

}, 5000);

或者：

setInterval(function(){

$('#element').toggleClass('magictime puffIn');

}, 3000 );

你可以修改默认的动画持续时间：

/* 默认的动画持续时间 */

.magictime {

-webkit-animation-duration: 1s;

-moz-animation-duration: 1s;

-o-animation-duration: 1s;

animation-duration: 1s;

}

/* 修改为3秒钟 */

.magictime {

-webkit-animation-duration: 3s;

-moz-animation-duration: 3s;

-o-animation-duration: 3s;

animation-duration: 3s;

}

或者单独修改某个动画的持续时间：

.magictime.magic {

-webkit-animation-duration: 10s;

-moz-animation-duration: 10s;

-o-animation-duration: 10s;

animation-duration: 10s;

}

浏览器兼容

以下版本的浏览器支持magic.css动画库。

Chrome 31+

Firefox 31+

Safari 7+

iOS Safari 7.1+

Opera 27+

Android 4.1+

Android Chrome 42+

IE 10+

Opera Mini 不支持