micron.js是一款可生成炫酷CSS3动画的js动画库插件。通过micron.js插件,你可以为页面的任意DOM元素添加12种炫酷CSS3动画效果。并能通过js代码或html5 data属性来串联各种CSS3动画效果。
安装
可以通过npm或bower来安装micron.js插件。
npm install webkul-micron bower install webkul-micron
使用方法
在页面中引入micron.min.css和micron.min.js文件。
<link href="dist/css/micron.min.css" type="text/css" rel="stylesheet"> <script src="dist/js/micron.min.js"></script>
HTML结构
例如你需要为一个按钮制作bounce动画效果,那么只需要像下面这样编写HTML代码。
<a href="#" class="button" data-micron="bounce">这是一个按钮</a>
你还可以通过data-micron-duration
属性来控制CSS3动画的持续时间。micron.js动画库的默认动画持续时间为0.45秒。
<a href="#" class="button" data-micron="bounce" data-micron-duration=".95">这是一个按钮</a>
你可以通过data-micron-timing
属性来控制动画的easing效果。可用的easing效果有:
linear
ease-in
ease-out
ease-in-out
<a href="#" class="button" data-micron="bounce" data-micron-timing="ease-in">这是一个按钮</a>
你可以使用其它元素来触发当前元素的CSS3动画效果。只需要为当前元素添加data-micron-bind="true"
和data-micron-id="name"
属性,其中name
是触发元素的id。例如:
<a href="#" class="button" data-micron="bounce" data-micron-bind="true" data-micron-id="me">这是一个按钮</a> <a href="#" class="button" id="me">触发按钮的动画效果</a>
初始化插件
通过js代码,你可以为広串联多个交互动作。
micron.getEle("").interaction("").duration("").timing("");
上面的代码通过getEle()
方法获取要进行动画交互的元素,并通过interaction()
方法传入交互动画类型,然后通过duration()
方法设置动画的持续时间,最后通过timing()
方法来设置动画的easing效果。
例如:
function myFunc(){ micron.getEle("#me").interaction("bounce").duration(".45").timing("ease-out"); } //Call Interaction myFunc();
可用的CSS3动画类型
Micron.js支持下面的几种CSS3动画类型,具体效果请参考demo页面。
micron="shake"
micron="fade"
micron="jelly"
micron="bounce"
micron="tada"
micron="groove"
micron="swing"
micron="squeeze"
micron="flicker"
micron="jerk"
micron="blink"
micron="pop"
micron.js 可生成炫酷CSS3动画的js动画库插件的github地址为:https://github.com/webkul/micron
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!