其他代码
micron - 生成炫酷CSS3动画插件
PetitQ
micron.js 是一款可生成炫酷 CSS3 动画的 js 动画库插件。通过 micron.js 插件，你可以为页面的任意 DOM 元素添加 12 种炫酷 CSS3 动画效果。并能通过 js 代码或 HTML5 data 属性来串联各种 CSS3 动画效果。
使用方法:
在页面中引入 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 InteractionmyFunc();
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
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
