如何利用CSS变量实现按钮的涟漪效果_动态记录点击位置坐标-css教程-PHP中文网

如何利用css变量实现按钮的涟漪效果_动态记录点击位置坐标

为什么直接用 `:active` 无法实现精准涟漪

因为 :active 伪类不感知点击坐标，只能触发全局样式变化；涟漪必须从鼠标/手指落点中心扩散，否则视觉上会“偏移”或“卡顿”。CSS 变量本身不响应事件，得靠 JavaScript 注入坐标值，再由 CSS 动画读取——这是唯一能兼顾性能与精度的路径。

如何用 `getBoundingClientRect()` 算出相对于按钮左上角的点击偏移

关键不是屏幕坐标，而是相对于按钮自身的 x 和 y。漏掉这步换算，涟漪圆心就会错位（比如点在右下角，却从左上角开始扩散）。

先用 event.clientX / event.clientY 获取视口坐标
再调用按钮元素的 getBoundingClientRect()，拿到 left、top、width、height
计算：x = event.clientX - rect.left，y = event.clientY - rect.top
为防小数导致渲染模糊，建议四舍五入：Math.round(x)

如何把坐标存进 CSS 变量并触发动画

CSS 变量必须写在元素自身（不能只写在 :root），否则动画无法绑定到具体点击位置。同时要重置前一次的变量值，否则连续点击会复用旧坐标。

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

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

下载

JS 中设置：button.style.setProperty('--ripple-x', x + 'px')
同理设置 --ripple-y，别忘了单位（px）
CSS 动画需监听这两个变量变化，但变量本身不触发重绘——所以得靠添加临时 class 或切换 opacity 来强制触发
推荐做法：点击后立即加 class（如 ripple-active），动画定义在该 class 下，用 var(--ripple-x) 定位 ::after 圆形伪元素

button::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.6);
  transform: translate(-50%, -50%);
  left: var(--ripple-x);
  top: var(--ripple-y);
  width: 0; height: 0;
  transition: width 0.6s, height 0.6s, opacity 0.6s;
}
button.ripple-active::after {
  width: 200px; height: 200px; opacity: 0;
}