Magic

🎩magic

具有特殊效果的 CSS3 动画。（→ 3.1 kB 压缩包）

演示

在此处查看动画演示

安装

GitHub 包注册表 -Package url

npm install @minimac/magic.css

NPM -包地址

npm i magic.css

YARN -包裹网址

yarn add magic.css

入门

包含文件magic.css或包含缩小版magic.min.css

<link rel="stylesheet" href="yourpath/magic.css">

或者

<link rel="stylesheet" href="yourpath/magic.min.css">

与 JavaScript 一起使用

这是使用JavaScript实现悬停效果的示例代码。首先，包括类 magictime，然后是所需的动画类。

const selector = document.querySelector('.yourdiv')
selector.classList.add('magictime', 'puffIn')

如果你想在一定时间后加载动画，你可以使用这个例子：

//set timer to 5 seconds, after that, load the magic animation
function myFunction() {
    const selector = document.querySelector('.yourdiv')
    selector.classList.add('magictime', 'puffIn')
}
setTimeout(myFunction, 5000);

如果你想在一定时间后加载动画但无限循环，你可以使用这个例子：

//set timer to 3 seconds, after that, load the magic animation and repeat forever
function myFunction() {
    const selector = document.querySelector('.yourdiv')
    selector.classList.add('magictime', 'puffIn')
}
setInterval(myFunction, 3000);

与 jQuery 一起使用

这是 jQuery 悬停效果的示例代码。首先，包括类 magictime，然后是所需的动画类。

$('.yourdiv').hover(function () {
    $(this).addClass('magictime puffIn');
});

如果你想在一定时间后加载动画，你可以使用这个例子：

//set timer to 5 seconds, after that, load the magic animation
setTimeout(function(){
    $('.yourdiv').addClass('magictime puffIn');
}, 5000);

如果你想在一定时间后加载动画但无限循环，你可以使用这个例子：

//set timer to 3 seconds, after that, load the magic animation and repeat forever
setInterval(function(){
    $('.yourdiv').toggleClass('magictime puffIn');
}, 3000 );

HTML 和 CSS 提示

您可以通过设置类来更改动画的时间，magictime例如：

.magictime {
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
}

默认CSS 时间为：

.magictime {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
}

如果要将时间分配给 特定动画 ，可以使用以下代码 （使用 2 类） ：

.magictime.magic {
    -webkit-animation-duration: 10s;
    animation-duration: 10s;
}

🎉Gulp 和 SCSS (SASS) 编译

如果您想自定义 CSS 文件，现在您将有机会。例如，如果您只想包含某些动画，则必须转到此文件：

assets/scss/magic.scss

注释或取消注释您想要的文件并从终端运行以下命令：

npm install

最后一个命令：

gulp

自动生成新文件！

✅浏览器支持