Magic 一个比较魔性的 CSS3 动画库 - 文章教程

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

发布于 2020-07-20 字数 7132 浏览 1907 评论 0

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

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

安装

GitHub Package RegistryPackage url

npm install @minimac/magic.css

NPMPackage url

npm i magic.css

YARNPackage url

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;
}

所有动画类

MAGIC EFFECTS BLING STATIC EFFECTS STATIC EFFECTS OUT PERSPECTIVE ROTATE
magic puffIn openDownLeft openDownLeftOut perspectiveDown rotateDown
twisterInDown puffOut openDownRight openDownRightOut perspectiveUp rotateUp
twisterInUp vanishIn openUpLeft openUpLeftOut perspectiveLeft rotateLeft
swap vanishOut openUpRight openUpRightOut perspectiveRight rotateRight
openDownLeftReturn perspectiveDownReturn
openDownRightReturn perspectiveUpReturn
openUpLeftReturn perspectiveLeftReturn
openUpRightReturn perspectiveRightReturn
SLIDE MATH TIN BOMB BOING ON THE SPACE
slideDown swashOut tinRightOut bombRightOut boingInUp spaceOutUp
slideUp swashIn tinLeftOut bombLeftOut boingOutDown spaceOutRight
slideLeft foolishIn tinUpOut spaceOutDown
slideRight holeOut tinDownOut spaceOutLeft
slideDownReturn tinRightIn spaceInUp
slideUpReturn tinLeftIn spaceInRight
slideLeftReturn tinUpIn spaceInDown
slideRightReturn tinDownIn spaceInLeft

自定义构建

如果您想自定义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+ no

相关链接

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2891 文章
评论
84935 人气
更多

推荐作者

伊面

文章 0 评论

白况

文章 0 评论

七禾

文章 0 评论

亢潮

文章 0 评论

悲念泪

文章 0 评论