主要通过更换 css 上的 animation 来实现涟漪效果。

但是大部分的实现方法会增加一个空白节点，

所以想出通过操作伪元素的方案来做。

代码如下

在线体验

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8" />
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.   <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  8.   <title>Document</title>
  9.   <style>
  10.     .input {
  11.       padding: 5em 10em;
  12.       border-radius: 0.3em;
  13.       position: relative;
  14.       background-color: rgb(189, 86, 86);
  15.       display: inline-block;
  16.       overflow: hidden;
  17.     }
  19.     .input1::after {
  20.       content: "";
  21.       display: block;
  22.       width: 6px;
  23.       height: 6px;
  24.       border-radius: 50%;
  25.       position: absolute;
  26.       /* transition: all 0.4s ease-in-out; */
  27.       z-index: 1111;
  28.       transform: scale(0);
  29.       /* top: 0;
  30.             left: 0; */
  31.       /* animation: spin 01s linear; */
  32.       background-color: rgba(0, 0, 0, 0.45);
  33.     }
  35.     @keyframes spin {
  36.       0% {
  37.         transform: scale(0);
  38.         background-color: rgba(0, 0, 0, 0.45);
  39.       }
  41.       100% {
  42.         transform: scale(150);
  43.         background-color: transparent;
  44.       }
  45.     }
  46.   </style>
  47. </head>
  49. <body>
  50.   <div onclick="fn(event)" class="input input1">
  51.     这是一个按钮
  52.   </div>
  53.   <script>
  54.     // 这是一个操作伪元素样式的方法
  55.     function ruleSelector(selector) {
  56.       function uni(selector) {
  57.         return selector.replace(/::/g, ":");
  58.       }
  59.       // es6
  60.       return Array.from(document.styleSheets)
  61.         .reduce((a, b) => {
  62.           return a.concat(Array.from(b.cssRules));
  63.         }, [])
  64.         .filter(x => {
  65.           return x.selectorText === selector;
  66.         });
  67.       // es5
  68.       // return Array.prototype.filter.call(Array.prototype.concat.apply([], Array.prototype.map.call(document.styleSheets, function (x) {
  69.       //   return Array.prototype.slice.call(x.cssRules);
  70.       // })), function (x) {
  71.       //   return uni(x.selectorText) === uni(selector);
  72.       // });
  73.     }
  75.     function fn(e) {
  76.       ruleSelector(".input1::after")[0].style.top = e.offsetY - parseInt(ruleSelector(".input1::after")[0].style.width,
  77.         10) / 2 + "px";
  78.       ruleSelector(".input1::after")[0].style.left = e.offsetX - parseInt(ruleSelector(".input1::after")[0].style
  79.         .height, 10) / 2 + "px";
  80.       ruleSelector(".input1::after")[0].style.animation = '';
  81.       setTimeout(() => { // 不这样做会被合并
  82.         ruleSelector(".input1::after")[0].style.animation = 'spin .5s linear';
  83.       })
  85.     }
  86.   </script>
  87. </body>
  89. </html>