html 按钮 水波纹,点击按钮出现水波纹动画

效果如下：

思路：

按钮及按钮的父标签定位需为绝对定位或相对定位

绑定按钮的click事件,把其样式设置为overflow:hidden，并添加下标线标签并设置其样式

当鼠标点击按钮时，如果按钮内有标签(波兰纹)即把该标签删掉，

然后给按钮添加一个新的标签(波浪纹),  注：必须先添加标签然后计算标签样式再更改其相应样式，如果先计算样式然后添加标签后立即接修改其样式，有可能出现修改样式时获取不到标签的问题；

获取目标事件的位置pageX和pageY，及按钮距离页面的左边和顶部的距离，通过计算获取标签(波浪纹)的top,left,width,height值(宽高为按钮的两倍)，

先把标签(波浪纹)缩放值设为0，transition为.4s，然后再修改其缩放值为1.5，透明度为0，并通过调用animate方法在实现动画效果后删除该标签

按钮的active类名作用： 用来判断是否需要修改下标线的位置及宽度

使用时调用按钮父标签的wave方法(按钮类名是必传的)

示例代码：

CSS：

.ul{display:flex;position:relative;width:600px;margin:auto;text-align:center;color:white;cursor:pointer;}.ul .li{position:relative;overflow:hidden;width:200px;height:60px;line-height:60px;background:orange;}

HTML：

TAG ONE