CSS中如何实现点击按钮后的反馈涟漪效果？-css教程-PHP中文网

涟漪效果的核心原理是通过javascript动态创建圆形span元素，基于点击坐标定位并用transform和opacity实现扩散消散动画。

css中如何实现点击按钮后的反馈涟漪效果？

涟漪效果的核心原理是什么？

涟漪不是纯 CSS 动画能独立完成的，它需要动态生成一个圆形 span 元素，从点击位置（clientX/clientY）出发，以相对按钮左上角为原点进行定位，并用 transform: scale() 和 opacity 实现扩散消散。纯 @keyframes 无法响应点击坐标，所以 JS 是必要环节。

涟漪容器必须是 position: relative，否则绝对定位的涟漪会脱离按钮范围
每次点击都要新建一个 span.ripple，不能复用，否则多个点击会互相干扰
涟漪元素需设 pointer-events: none，避免遮挡后续点击

如何用原生 JS 绑定并计算点击坐标？

关键在 getBoundingClientRect() 和鼠标事件坐标转换：

button.addEventListener('click', function(e) {
  const rect = this.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;
  const ripple = document.createElement('span');
  ripple.className = 'ripple';
  ripple.style.left = `${x}px`;
  ripple.style.top = `${y}px`;
  this.appendChild(ripple);
  // 清理：动画结束后移除 DOM
  setTimeout(() => ripple.remove(), 600);
});

e.clientX 是视口坐标，减去 rect.left/top 才是相对于按钮的坐标
不要用 offsetLeft/offsetTop，它们不包含滚动偏移，容易错位
setTimeout 时间应与 CSS 动画时长一致（如 600ms），否则残留 DOM 节点

CSS 动画部分怎么写才自然？

涟漪的视觉节奏靠两段变化：快速放大 + 缓慢透明消失。推荐用 transform 替代 width/height，性能更好：

Javascript Sdk

用于 inference.sh 的 JavaScript/TypeScript SDK，可运行 AI 应用、构建代理、集成 150+ 模型。包名：@inferencesh/sdk（npm install），完整 TypeScript 支持。

下载

.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(0,0,0,0.2);
  transform: scale(0);
  pointer-events: none;
  animation: ripple 600ms linear;
}
<p>@keyframes ripple {
0% { transform: scale(0); opacity: 1; }
100% { transform: scale(4); opacity: 0; }
}</p>