动画只适用于一个按钮(波纹视图)

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

.button::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  opacity: 0;
  animation: ripple 1s linear;
}

@keyframes ripple {
  0% {
    opacity: 1;
    width: 0;
    height: 0;
  }
  100% {
    opacity: 0;
    width: 200%;
    height: 200%;
  }
}

<button class="button">按钮</button>

const button = document.querySelector('.button');

button.addEventListener('click', function(event) {
  const ripple = document.createElement('span');
  ripple.classList.add('ripple');
  ripple.style.left = event.offsetX + 'px';
  ripple.style.top = event.offsetY + 'px';
  button.appendChild(ripple);
  setTimeout(function() {
    ripple.remove();
  }, 1000);
});

.ripple {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: ripple 1s linear;
}

@keyframes ripple {
  0% {
    opacity: 1;
    width: 0;
    height: 0;
  }
  100% {
    opacity: 0;
    width: 200%;
    height: 200%;
  }
}

<button class="button">按钮</button>