CSS按钮水波纹效果实现方法

今日不肯埋头，明日何以抬头！每日一句努力自己的话哈哈~哈喽，今天我将给大家带来一篇《CSS按钮水波纹效果实现教程》，主要内容是讲解等等，感兴趣的朋友可以收藏或者有更好的建议在评论提出，我都会认真看的！大家一起进步，一起学习！

水波纹效果通过CSS动画和JS点击坐标实现，核心是创建圆形元素从点击位置扩散。使用相对定位按钮，动态生成带ripple-effect动画的span，设置渐隐放大效果，并在动画结束后移除元素，适用于Material风格界面，注意控制颜色、尺寸与动画时长以提升交互体验。

按钮点击时的水波纹效果（也叫涟漪效果）在 Material Design 中很常见，能增强用户交互反馈。通过 CSS 和少量 JavaScript 可以轻松实现这一效果。

原理说明

水波纹效果的核心是在按钮内部创建一个圆形的 ::after 或动态 span 元素，点击时从点击位置向外扩散并逐渐透明消失。

纯 CSS + 少量 JS 实现方法

虽然不能完全不用 JS 获取点击坐标，但 CSS 负责动画和样式，JS 仅添加类或元素。

HTML 结构：

<button class="ripple-btn">点击我</button>

CSS 样式：

.ripple-btn {
  position: relative;
  overflow: hidden;
  padding: 12px 24px;
  font-size: 16px;
  color: white;
  background-color: #007bff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

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

.ripple-btn:active::after {
  width: 200px;
  height: 200px;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

更真实的点击位置水波纹（需 JS）

上面的方式中心扩散，不够真实。可以通过 JS 动态创建波纹元素，从实际点击位置展开。

改进版 JS + CSS：

document.querySelectorAll('.ripple-btn').forEach(button => {
  button.addEventListener('click', function (e) {
    const ripple = document.createElement('span');
    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.cssText = `
      position: absolute;
      width: ${size}px;
      height: ${size}px;
      left: ${x}px;
      top: ${y}px;
      background-color: rgba(255, 255, 255, 0.4);
      border-radius: 50%;
      transform: scale(0);
      animation: ripple-effect 0.6s ease-out;
      pointer-events: none;
    `;

    this.appendChild(ripple);

    setTimeout(() => {
      ripple.remove();
    }, 600);
  });
});

对应的关键帧动画 CSS：

@keyframes ripple-effect {
  to {
    transform: scale(2);
    opacity: 0;
  }
}

使用建议

这类效果适合用在扁平化或 Material 风格的界面中。注意以下几点：

• 确保按钮 position: relative，以便绝对定位波纹元素
• 设置 overflow: hidden 防止波纹溢出按钮边界
• 颜色根据按钮背景调整，浅色按钮可用深色半透明波纹
• 动画时间控制在 0.5~1 秒之间，太长会显得迟钝

基本上就这些，不复杂但容易忽略细节。

以上就是《CSS按钮水波纹效果实现方法》的详细内容，更多关于CSS,JavaScript,动画,按钮,水波纹效果的资料请关注golang学习网公众号！