水波纹按钮的实现

水波纹按钮是一种有趣的视觉效果，通常用于点击或触摸时展示出类似水波扩散的动画。这种效果可以通过纯 CSS 或结合 JavaScript 来实现。以下是使用 CSS 实现水波纹效果的基本方法。

1. 基本结构

水波纹按钮通常由一个 button 元素和内部的 span 元素组成，span 用于展示波纹效果。

<button class="ripple-button">
  Click Me
  <span class="ripple"></span>
</button>

2. 样式定义

接下来，我们通过 CSS 定义按钮的基本样式和水波纹动画。水波纹效果依赖于 position: relative 和 position: absolute 来定位波纹，使用 border-radius 确保波纹效果呈现为圆形。

.ripple-button {
  position: relative;
  overflow: hidden;
  padding: 10px 20px;
  font-size: 16px;
  color: white;
  background-color: #6200ea;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  outline: none;
}

.ripple-button .ripple {
  position: absolute;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  transform: scale(0);
  animation: ripple-animation 0.6s linear;
  pointer-events: none;
}

@keyframes ripple-animation {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

3. 动态生成波纹

通过 JavaScript，波纹效果可以根据点击位置动态生成。以下代码在按钮点击时为 span 元素添加波纹动画效果。

document.querySelectorAll('.ripple-button').forEach(button => {
  button.addEventListener('click', function (e) {
    const ripple = this.querySelector('.ripple');
    const rect = this.getBoundingClientRect();
    const size = Math.max(rect.width, rect.height);
    const x = e.clientX - rect.left - size / 2;
    const y = e.clientY - rect.top - size / 2;

    ripple.style.width = ripple.style.height = `${size}px`;
    ripple.style.left = `${x}px`;
    ripple.style.top = `${y}px`;
    ripple.classList.add('ripple-active');

    // 动画结束后移除 class
    ripple.addEventListener('animationend', () => {
      ripple.classList.remove('ripple-active');
    });
  });
});

5. 总结

通过结合 HTML、CSS 和 JavaScript，我们可以轻松实现水波纹按钮效果。这种效果为用户交互增加了视觉吸引力，尤其适用于现代网页设计和移动应用界面。