纯JS按钮点击波特效（Material Design风格）

使用方法：

在页面中引入ripple.js文件

<script src="path/to/ripple.js"></script>

引入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);
});

HTML结构

为你需要制作按钮点击波效果的元素添加data-ripple属性。

<button data-ripple>Click Me</button>