图片/图形
Magic - 带64种动画效果的CSS3动画库
PetitQ
magic.css 是一款带 64 种动画效果的 CSS3 动画库。magic.css 中的动画分为 12 大类，全部使用 CSS3 animation 动画来完成。各种效果使用非常简单，只需要为元素添加和移除相应的 class 类即可。
使用方法
使用该动画库需要在页面中引入 magic.css 文件。
也想出现在这里？联系我们吧
<link rel="stylesheet" href="path/to/magic.css">
HTML 结构
你可以为一个元素设置背景图像，然后制作背景图像动画，也可以直接使元素产生动画。
<div id="element"></div>
制作动画
你可以动态的使用 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 不支持
Github 地址：https://github.com/miniMAC/magic
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
