jquery点击水纹波动动画原理:
1.在需要实现水波纹效果的标签中添加
    2.代码会定位 鼠标相对 与 标签的位置，以鼠标点为圆心画圆
    3.圆的半径 可以自定义(默认为标签的最大宽或高度)
    4.圆点颜色，和动画时间等可以自行修改内部代码，或直接 调用 $().css({})方法 进行覆盖
ripple-wrapper.js
$(function(){ $(.ripple-wrapper).css( { position: absolute, top: 0, left: 0, z-index: 1, width: 100%, height: 100%, overflow: hidden, border-radius: inherit, pointer-events: none }); $(.ripple-wrapper).parent().click(function(e){ var ripple_obj=$(this).find(.ripple-wrapper); if(ripple_obj.find(div).length){ripple_obj.find(div).remove();} ripple_obj.prepend(
); var ripple_div=ripple_obj.find(div); ripple_div.css( { display: block, background: rgba(255, 255, 255, 0.7), border-radius: 50%, position: absolute, -webkit-transform: scale(0), transform: scale(0), opacity: 1, transition: all 0.7s, -webkit-transition: all 0.7s, -moz-transition: all 0.7s, -o-transition: all 0.7s, z-index: 1, overflow: hidden, pointer-events: none }); var r= parseint(ripple_obj.outerwidth());/*默认半径为ripple-wrapper宽*/ if(parseint(ripple_obj.outerwidth()) html
document 点一下

演示图
未封装代码
document adasdsd