css+js实现水波纹效果-CFANZ编程社区

效果如下
新建HTML文件，把下面的代码直接贴进来，浏览器打开看效果。
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>点击水波纹</title>
    <style>
      .content {
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        width: 200px;
        height: 50px;
        background: #409eff;
        cursor: pointer;
      }
      /* 水波纹样式-开始 */
      .ripple {
        position: relative;
        overflow: hidden;
      }
      .ripple-div {
        position: absolute;
        z-index: 10;
        background: hsla(0, 0%, 100%, 0.3);
        border-radius: 50%;
        opacity: 1;
        top: 0;
        left: 0;
        -ms-transform: scale(0);
        -moz-transform: scale(0);
        -o-transform: scale(0);
        -webkit-transform: scale(0);
        transform: scale(0);
        pointer-events: none;
        height: 100%;
        width: 100%;
      }
      .ripple-div.rippling {
        -ms-animation: rippleAnima 0.6s linear;
        -moz-animation: rippleAnima 0.6s linear;
        -o-animation: rippleAnima 0.6s linear;
        -webkit-animation: rippleAnima 0.6s linear;
        animation: rippleAnima 0.6s linear;
      }
      @-ms-keyframes rippleAnima {
        to {
          opacity: 0;
          -ms-transform: scale(3);
          -moz-transform: scale(3);
          -o-transform: scale(3);
          -webkit-transform: scale(3);
          transform: scale(3);
        }
      }
      @-moz-keyframes rippleAnima {
        to {
          opacity: 0;
          -ms-transform: scale(3);
          -moz-transform: scale(3);
          -o-transform: scale(3);
          -webkit-transform: scale(3);
          transform: scale(3);
        }
      }
      @-o-keyframes rippleAnima {
        to {
          opacity: 0;
          -ms-transform: scale(3);
          -moz-transform: scale(3);
          -o-transform: scale(3);
          -webkit-transform: scale(3);
          transform: scale(3);
        }
      }
      @-webkit-keyframes rippleAnima {
        to {
          opacity: 0;
          -ms-transform: scale(3);
          -moz-transform: scale(3);
          -o-transform: scale(3);
          -webkit-transform: scale(3);
          transform: scale(3);
        }
      }
      @keyframes rippleAnima {
        to {
          opacity: 0;
          -ms-transform: scale(3);
          -moz-transform: scale(3);
          -o-transform: scale(3);
          -webkit-transform: scale(3);
          transform: scale(3);
        }
      }
      /* 水波纹样式-结束 */
    </style>
  </head>

  <body>
    <div class="content ripple">点击水波纹一</div>
    <div class="content ripple" style="background: #67c23a">点击水波纹二</div>
  </body>
  <script>
    // 对要添加水波纹效果的元素添加ripple类
    let eles = document.getElementsByClassName("ripple");
    for (let index = 0; index < eles.length; index++) {
      const element = eles[index];
      // 添加点击事件
      element.addEventListener("click", (e) => {
        let createDiv = document.createElement("div");
        createDiv.className = "ripple-div rippling";
        // 重新计算水波纹的中心位置
        createDiv.style.top = `${e.offsetY - e.target.offsetHeight / 2}px`;
        createDiv.style.left = `${e.offsetX - e.target.offsetWidth / 2}px`;
        // 追加到元素中
        element.appendChild(createDiv);
        setTimeout(() => {
          // 删除元素
          element.removeChild(createDiv);
        }, 600);
      });
    }
  </script>
</html>