纯CSS打造的HTML按钮特效：无需JS也能实现波纹点击效果-html教程-PHP中文网

纯css只能实现居中波纹，无法从点击点出发；因:active无坐标信息、css无法读取clientx/clienty，所有纯css方案均固定从中心或左上角触发，必须用js计算点击坐标并动态控制::after定位与动画。

纯css打造的html按钮特效：无需js也能实现波纹点击效果

纯 CSS 能做出波纹点击效果，但只能从按钮中心扩散；要让波纹真正从鼠标点击位置出发，必须用 JavaScript 获取坐标——这是硬限制，不是技巧问题。

为什么 `:active` + `::after` 波纹总在正中间

CSS 无法读取 clientX/clientY，:active 状态下伪元素的 top/left 只能写死或用 50% 居中。哪怕加了 transform: translate(-50%, -50%)，它也只认父容器中心，不认点击点。

常见错误包括：

直接在按钮上写 button:active { background: radial-gradient(circle at center, rgba(0,0,0,0.2) 0%, transparent 50%); }——这会覆盖原有背景，且永远“炸”在中间
漏设 position: relative 在按钮上，导致 ::after 相对于 body 定位，波纹飞出按钮外
没加 overflow: hidden，波纹扩散时溢出边界，视觉失控

`::after` 伪元素实现中心波纹的关键参数

这是最轻量、兼容性最好的方案，适合对定位精度无要求的场景（如移动端大按钮、设计稿明确要求居中反馈）。

核心配置要点：

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

按钮必须有 position: relative 和 overflow: hidden
::after 必须含 content: ""、position: absolute、border-radius: 50%
动画优先用 transform: scale()，别改 width/height，避免重排
加 pointer-events: none 到伪元素，否则它会挡住后续点击
缓动函数建议用 cubic-bezier(0.25, 0.46, 0.45, 0.94) 或 ease-out，比 linear 更自然

示例片段：

button {
  position: relative;
  overflow: hidden;
}
button::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.35s ease-out, opacity 0.35s ease-out;
  pointer-events: none;
}
button:active::after {
  transform: translate(-50%, -50%) scale(3);
  opacity: 0;
}