带点击涟漪扩散的HTML5按钮JS+CSS实现【方法】_技术教程

可通过五种方法实现网页按钮点击涟漪效果：一、CSS伪元素+JS动态定位；二、动态创建DOM+CSS动画；三、CSS自定义属性+transition；四、SVG路径绘制；五、Web Animation API驱动，各法兼顾性能与兼容性。

如果您希望为网页按钮添加点击时的涟漪扩散视觉效果，可以通过纯HTML5、CSS和JavaScript组合实现。以下是多种不同的实现方法：

一、CSS伪元素+JavaScript动态定位法

该方法利用::after伪元素创建圆形涟漪，通过JavaScript在点击时动态设置其位置与尺寸，并借助CSS过渡实现扩散动画。

1、在HTML中定义按钮，添加data-ripple属性标识支持涟漪效果：

2、在CSS中设置按钮基础样式及伪元素涟漪容器：
.ripple-btn { position: relative; overflow: hidden; }
.ripple-btn::after { content: ''; position: absolute; border-radius: 50%; background: rgba(0,0,0,0.2); transform: scale(0); transition: transform 0.6s ease-out; }

3、在JavaScript中监听点击事件，计算点击坐标并更新伪元素样式：
document.querySelectorAll('[data-ripple]').forEach(btn => {
  btn.addEventListener('click', e => {
    const rect = btn.getBoundingClientRect();
    const x = e.clientX - rect.left - rect.width / 2;
    const y = e.clientY - rect.top - rect.height / 2;
    const ripple = btn.querySelector('::after');
    if (ripple) {
      ripple.style.left = `${x}px`;
      ripple.style.top = `${y}px`;
      ripple.style.transform = 'scale(1)';
    }
  });
});

二、动态创建DOM元素+CSS动画法

该方法在每次点击时动态插入一个元素作为涟漪载体，通过CSS关键帧动画控制其缩放与透明度变化，避免伪元素复用限制。

1、为按钮添加唯一类名并确保其position为relative：

2、定义CSS关键帧动画及涟漪元素样式：
@keyframes ripple {
to { transform: scale(4); opacity: 0; }
}
.ripple { position: absolute; border-radius: 50%; background: rgba(0,0,0,0.15); animation: ripple 0.6s linear; }

3、编写JavaScript，在点击位置创建并注入涟漪元素：
document.querySelectorAll('.ripple-btn-dynamic').forEach(btn => {
  btn.addEventListener('click', e => {
    const rect = btn.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;
    const ripple = document.createElement('span');
    ripple.classList.add('ripple');
    ripple.style.left = `${x}px`;
    ripple.style.top = `${y}px`;
    btn.appendChild(ripple);
    setTimeout(() => ripple.remove(), 600);
  });
});

三、CSS自定义属性+transition优化法

该方法使用CSS自定义属性（--ripple-x、--ripple-y）传递坐标，配合transition实现更简洁的JS逻辑与更高性能的渲染。

1、HTML结构保持简洁，无需额外属性：

2、CSS中声明自定义属性并绑定过渡：
.ripple-btn-css-vars { position: relative; overflow: hidden; }
.ripple-btn-css-vars::before { content: ''; position: absolute; border-radius: 50%; background: rgba(0,0,0,0.1); transform: translate(-50%, -50%) scale(0); transition: transform 0.5s ease-out; left: var(--ripple-x); top: var(--ripple-y); }

3、JavaScript仅需设置CSS变量值，不操作DOM：
document.querySelectorAll('.ripple-btn-css-vars').forEach(btn => {
  btn.addEventListener('click', e => {
    const rect = btn.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;
    btn.style.setProperty('--ripple-x', `${x}px`);
    btn.style.setProperty('--ripple-y', `${y}px`);
    btn.style.setProperty('transform', 'scale(1)');
    setTimeout(() => {
      btn.style.removeProperty('--ripple-x');
      btn.style.removeProperty('--ripple-y');
      btn.style.removeProperty('transform');
    }, 500);
  });
});

四、SVG路径绘制涟漪法

该方法使用内联SVG作为按钮背景，通过JavaScript动态修改元素的r（半径）与opacity属性，以SVG原生渲染能力实现高保真涟漪。

1、在按钮内部嵌入SVG，并预留circle元素：

2、CSS中隐藏默认按钮边框并确保SVG铺满：
.ripple-btn-svg { padding: 0; border: none; background: transparent; position: relative; }
.ripple-btn-svg svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

3、JavaScript获取SVG中的circle并触发动画：
document.querySelectorAll('.ripple-btn-svg').forEach(btn => {
  const svg = btn.querySelector('svg');
  const circle = svg.querySelector('circle');
  btn.addEventListener('click', e => {
    const rect = btn.getBoundingClientRect();
    const x = ((e.clientX - rect.left) / rect.width) * 100;
    const y = ((e.clientY - rect.top) / rect.height) * 100;
    circle.setAttribute('cx', x);
    circle.setAttribute('cy', y);
    circle.setAttribute('r', '0');
    circle.setAttribute('opacity', '0.2');
    circle.animate([
      { r: '0', opacity: '0.2' },
      { r: '50', opacity: '0' }
    ], { duration: 600, easing: 'ease-out' });
  });
});

五、Web Animation API高性能驱动法

该方法完全脱离CSS transition与keyframes，直接使用Web Animation API控制动画参数，获得更精细的时间轴控制与更低的主线程负担。

1、HTML按钮保持标准结构：

2、CSS仅需基础定位与隐藏溢出：
.ripple-btn-waa { position: relative; overflow: hidden; }

3、JavaScript中创建动画并绑定到新创建的涟漪元素：
document.querySelectorAll('.ripple-btn-waa').forEach(btn => {
  btn.addEventListener('click', e => {
    const rect = btn.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;
    const ripple = document.createElement('span');
    ripple.style.position = 'absolute';
    ripple.style.borderRadius = '50%';
    ripple.style.backgroundColor = 'rgba(0,0,0,0.15)';
    ripple.style.transform = 'translate(-50%, -50%) scale(0)';
    ripple.style.left = `${x}px`;
    ripple.style.top = `${y}px`;
    btn.appendChild(ripple);
    ripple.animate([
      { transform: 'translate(-50%, -50%) scale(0)', opacity: 0.2 },
      { transform: 'translate(-50%, -50%) scale(4)', opacity: 0 }
    ], {
      duration: 600,
      easing: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)'
    }).onfinish = () => ripple.remove();
  });
});