101

0

Magic

具有特殊效果的 CSS3 动画

🎩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

自动生成新文件!

✅浏览器支持

Browser Chrome Firefox Safari iOS Safari Opera Android Android Chrome IE Opera Mini
Version 31+ 31+ 7+ 7.1+ 27+ 4.1+ 42+ 10+