Ripple.js是一个jQuery插件，它为您的网站或web应用程序上的元素添加了一种可定制的令人惊叹的波纹点击效果，这是一种常用于材料设计的视觉技术。

它创建了一个波纹状的动画，从用户单击元素的点发出，模拟水滴撞击池塘表面的效果。通常用于可点击的元素（如按钮和链接），向用户提供视觉反馈，表明他们与元素的交互已经注册。

参见：

• JavaScript/CSS中的10种最佳材料波纹点击/点击效果

如何使用它:

1.下载并在页面上包含jQuery Ripple.js插件的文件。

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<link rel="stylesheet" href="/path/to/dist/ripple.min.css" />
<script src="/path/to/dist/ripple.min.js"></script>

2.将波纹点击效果应用于元素。

$.ripple('.myElement', {
  // options
});

3.自定义触发事件。默认值：“mousedown”。

$.ripple('.myElement', {
  on: 'mouseenter',
});

4.配置波纹点击效果的外观。

$.ripple('.myElement', {
  opacity: 0.4,
  color: "auto",
  multi: false,
  duration: 0.7,
  rate: function(pxPerSecond) {
    return pxPerSecond; // animation speed
  },
  easing: 'linear'
});

5.您还可以通过HTML传递选项数据属性。

<a href="#" 
   data-duration="1" 
   data-color="black" 
   data-opacity="1">
   Click Me
</a>

预览截图

材料设计波浪状动画点击 jQuery Ripple.js