CSS如何实现点击波纹效果_结合CSS动画与伪元素制作-css教程-PHP中文网

点击波纹效果的核心原理是用:after伪元素配合transform:scale()动画模拟扩散效果，需JS获取点击坐标并写入CSS变量，容器设position:relative且overflow:hidden，伪元素设transform-origin:center center。

css如何实现点击波纹效果_结合css动画与伪元素制作

点击波纹效果的核心原理是什么

波纹不是靠 JS 画圆，而是用 :after 伪元素 + transform: scale() 动画模拟「从点击点向外扩散」的视觉错觉。关键在于：波纹必须以点击位置为圆心、动态设置 left 和 top，且容器需设 position: relative，否则伪元素会脱标乱飘。

如何用纯 CSS 定位到鼠标点击坐标

CSS 本身不能读取点击坐标，所以必须靠 JS 获取并写入自定义属性。这是最容易卡住的地方——很多人想纯 CSS 实现，结果发现波纹总在左上角炸开。

给目标元素绑定 click 事件，用 event.clientX 和 event.clientY 减去元素 getBoundingClientRect() 的偏移，算出相对于容器的 x/y
把结果写进 style.setProperty('--x', x + 'px') 和 --y，CSS 里用 left: var(--x)、top: var(--y)
务必在每次点击前重置伪元素的 scale，否则第二次点击会从上次结束状态继续动画

示例关键片段：

button {
  position: relative;
  overflow: hidden;
}
button::after {
  content: '';
  position: absolute;
  width: 10px; height: 10px;
  background: rgba(0,0,0,0.2);
  border-radius: 100%;
  transform: scale(0);
  transform-origin: center center;
  left: var(--x, 50%);
  top: var(--y, 50%);
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
button:focus::after { animation: ripple 0.4s ease-out; }