可通过五种方法实现网页按钮点击涟漪效果：一、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动态修改
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();
});
});
