Magic 一个比较魔性的 CSS3 动画库

Magic CSS3 Animations 动画是一款独特的CSS3动画特效包，你可以自由地使用在您的网页中。只需简单的在页面上引入 CSS 文件 magic.css 或者压缩版本 magic.min.css 就可以使用了。

安装

GitHub Package Registry - Package url( github /miniMAC/magic/packages/24129)

npm install @minimac/magic.css

NPM - Package url( www.npmjs 商业网/package/magic.css)

npm i magic.css

YARN - Package url( yarnpkg 商业网/en/package/magic.css)

yarn add magic.css

使用方法

首先引入magic.css文件（或压缩版本magic.min.css）

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

或者是

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

给指定的元素加上指定的动画样式名

<div class="magictime puffIn"></div>

其中 magictime 决定动画的持续时间，必须添加的样式名。

在 JavaScript 中使用

这是一个用于悬停效果的示例代码 JavaScript。首先，引入 CSS 文件并添加 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悬停效果的示例代码。首先，引入 CSS 文件并添加 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;
}

所有动画类

自定义构建

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

assets/scss/magic.scss

注释或取消对所需文件的注释，并从终端运行以下命令：

npm install

最后的命令是：

gulp

自动这会产生新的文件！

浏览器兼容

相关链接

• github 地址： github /miniMAC/magic