按钮图标
Material Design风格纯js按钮点击波特效
PetitQ
这是一款使用纯 js 制作的炫酷 Material Design 风格按钮点击波特效。该按钮点击波特效不依赖于任何外部库，使用纯 js 制作，运行速度快，效果非常炫酷。
使用方法：
在页面中引入 ripple.js 文件。
也想出现在这里？联系我们吧
<script src="path/to/ripple.js"></script>
HTML 结构：
为你需要制作按钮点击波效果的元素添加 data-ripple 属性。
<button data-ripple>Click Me</button>
CSS 样式：
.ripple-container {
}.ripple-container .ripple{
background-color: rgba(255,255,255,0.4);
animation: ripple 2s forwards cubic-bezier(0, 0, 0.2, 1);
}@keyframes ripple {
0% {
transform: scale(0);
opacity: 1;
}80% {
transform: scale(1);
}100% {
opacity: 0;
}}
初始化插件:
使用下面的 JavaScript 代码来在按钮点击时，激活点击波效果。
Array.prototype.forEach.call(document.querySelectorAll('[data-ripple]'), function(element){
new RippleEffect(element);
});
material-ripple-effect 按钮点击波特效的 github 地址为：https://github.com/davinder17s/material-ripple-effect
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
