自定义波纹效果(我想在我的内联样式中使用var )

.ripple {
  position: relative;
  overflow: hidden;
}

.ripple::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: width 0.3s ease, height 0.3s ease, opacity 0.3s ease;
}

.ripple.active::after {
  width: 200%;
  height: 200%;
  opacity: 1;
}

var elements = document.getElementsByClassName('ripple');

Array.prototype.forEach.call(elements, function(element) {
  element.addEventListener('click', function(e) {
    var ripple = document.createElement('span');
    ripple.classList.add('ripple');
    ripple.style.top = e.clientY + 'px';
    ripple.style.left = e.clientX + 'px';
    this.appendChild(ripple);

    setTimeout(function() {
      ripple.classList.add('active');
    }, 0);

    setTimeout(function() {
      ripple.remove();
    }, 600);
  });
});