micron.js 介绍
micron.js是一款可 生成 炫酷css3动画的js动画库 插件 。通过micron.js 插件 ,你可以为 页面 的任意DOM元素 添加 12种炫酷css3动画 效果 。并能通过js 代码 或html5 data 属性 来串联各种css3动画 效果 。
micron.js使用
1、安装或引入
npm install webkul-micron
bower install webkul-micron
或
<link href="css/micron.min.css" type="text/css" rel="stylesheet">
<script src="js/micron.min.js"></script>
2、html结构
<a href="#" class="button" data-micron="bounce">按钮</a>
可以通过data-micron-duration 属性 来控制css3动画的持续时间。micron.js动画库的 默 认动画持续时间为0.45秒。
可以通过data-micron-timing 属性 来控制动画的easing 效果 。可用的easing 效果 有:
linear
ease-in
ease-out
ease-in-out
3、初始化
micron.getEle("").in tera ction("").duration("").timing("");
上面的 代码 通过getEle() 方法 获取 要进行动画交互的元素,并通过in tera ction() 方法 传入交互动画类型,然后通过duration() 方法 设置动画的持续时间,最后通过timing() 方法 来设置动画的easing 效果 。
网站地址 : https://webkul.github.io/micron/
GitHub: https://github.com/webkul/micron
网站描述: 一款可 生成 炫酷CSS3动画的js动画库 插件
micron.js官方网站
官方网站: https://webkul.github.io/micron/
如果觉得 网站内容还不错,欢迎将 网站 推荐给程序员好友。