rippleria.js是一款效果非常炫酷的 Material Design鼠标点击波特效jQuery插件。该插件使用CSS3 animation动画来制作点击波效果,可以在按钮和图片等元素上制作点击波特效。
安装
可以通过bower来安装该点击波插件。
$ bower i -S rippleria
使用方法
使用该点击波插件需要在页面中引入jquery.rippleria.css,jquery和jquery.rippleria.js文件。
<link rel="stylesheet" href="css/jquery.rippleria.css"> <script src="js/jquery.min.js"></script> <script src="js/jquery.rippleria.js"></script>
HTML结构
为需要添加点击波效果的元素添加data-rippleria
属性。
<button data-rippleria>Default</button>
你可以通过HTML5 data-*
属性来自定义点击波的效果:
<button data-rippleria data-rippleria-color="blue" data-rippleria-easing="ease-in" data-rippleria-duration="5000"> Click me </button>
data-rippleria-dark
用于指定反色效果的点击波。
初始化插件
你也可以通过初始化插件的反色来定义点击波的效果。
$('.selector').rippleria({ // 动画的速度 duration: 750, // 自定义easing效果 easing: 'linear', // 自定义颜色 color: undefined }); $('.selector').rippleria("changeDuration", "500"); $('.selector').rippleria("changeEasing", "ease-in-out"); $('.selector').rippleria("changeColor", "blue");
rippleria点击波插件的github地址为:https://github.com/nsept/rippleria