CSS如何制作水波纹扩散点击反馈_使用::after伪元素配合transform控制-css教程-PHP中文网

水波纹效果需javascript驱动获取点击坐标并动态设置伪元素圆心位置，核心步骤包括：目标元素设position: relative；::after需content、absolute、border-radius: 50%且opacity: 0；动画用transform+opacity避免重排。

css如何制作水波纹扩散点击反馈_使用::after伪元素配合transform控制

点击时水波纹从中心向四周扩散的原理

核心是用 ::after 伪元素画一个透明圆，点击瞬间通过 JavaScript 记录坐标并设置为 transform-origin，再用 transform: scale() 放大它，配合 opacity 淡出实现扩散消散效果。纯 CSS 无法获取点击坐标，所以必须 JS 驱动 —— 这点常被教程忽略，导致“复制代码没反应”。

给按钮加水波纹前必须做的三件事

否则伪元素不显示、定位错乱或动画卡顿：

目标元素（如 button）需设 position: relative，否则 ::after 的绝对定位会脱离预期位置
::after 必须设 content: ""、position: absolute、border-radius: 50%，且初始 opacity: 0
动画要用 transform + opacity，避免触发布局重排；scale(0) 到 scale(4) 是常见安全范围，太大易出屏

JS 动态设置圆心坐标的正确写法

关键在把点击事件的 clientX/clientY 转换为相对于按钮左上角的偏移值，再传给 transform-origin：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

element.addEventListener('click', (e) => {
  const rect = element.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`;
  element.appendChild(ripple);
  // 动画结束后移除节点
  setTimeout(() => ripple.remove(), 600);
});

注意：不能直接用 e.offsetX/e.offsetY，它们在某些浏览器中对 button 不稳定；getBoundingClientRect() 更可靠。