按钮图标
Material design风格点击波特效 ripplet 插件
PetitQ
ripplet.js 是一款 Material design 风格点击波特效 js 插件。通过 ripplet.js 插件，你可以制作并控制点击波效果，生成自己风格的点击波特效。
使用方法：
在页面中引入 ripplet.js 文件。。
也想出现在这里？联系我们吧
HTML 结构：
以一个按钮为例来制作点击波特效，HTML 结构如下：
<!--默认的点击波效果-->
<button data-ripplet>Default</button>
<!--带参数的点击波效果-->
<button data-ripplet="color: rgba( 64, 192, 255, .2); spreading-duration: 2s; clearing-delay: 1.8s;">天空蓝</button>
初始化插件:
也可以通过 js 的方法来对插件进行初始化。
ripplet(targetSuchAsMouseEvent, options)
//targetSuchAsMouseEvent: { currentTarget: Element, clientX: number, clientY: number }//options: 配置参数
配置参数:
ripplet.js 点击波特效插件的可用配置参数如下：
{className: '',
color: 'rgba(0, 0, 0, .1)',
opacity: null,
spreadingDuration: '.4s',
spreadingDelay: '0s',
spreadingTimingFunction: 'linear',
clearingDuration: '1s',
clearingDelay: '0s',
clearingTimingFunction: 'ease-in-out',
}
ripplet.js 点击波特效插件的 github 地址为：
https://github.com/luncheon/ripplet.js
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
