是什么 ? | : | CSS3 Animations with special effects. |
开发语言 | : | CSS |
源码仓库 | : | https://github.com/miniMAC/magic |
jsDelivr⤵︎
<link href="https://cdn.jsdelivr.net/npm/magic.css@1.4.5/dist/magic.min.css" rel="stylesheet">
BootCDN⤵︎
<link href="https://cdn.bootcdn.net/ajax/libs/magic/1.1.0/magic.min.css" rel="stylesheet">
step1、通过包管理器
安装magic.css
包管理器 | 安装命令 |
---|---|
bower | bower install magic.css --save |
npm | npm install magic.css --save |
yarn | yarn add magic.css |
<link href="/bower_components/magic.css/dist/magic.min.css" rel="stylesheet">
在要展示动画的元素上,使用magictime
类,再加上具体一种动画,示例:
$('.yourdiv').hover(function () {
$(this).addClass('magictime puffIn');
});
setTimeout(function(){
$('.yourdiv').addClass('magictime puffIn');
}, 5000);
setInterval(function(){
$('.yourdiv').toggleClass('magictime puffIn');
}, 3000 );