怎么用CSS3实现水波纹扩散点击交互动效-css教程-PHP中文网

纯CSS3无法实现真正可用的水波纹点击交互动效，因其无法获取click事件坐标、计算元素内相对定位或动态确定圆心；:active伪类不记录点击位置，@keyframes动画静态不可变，iOS Safari中:active还常延迟或失效。

怎么用css3实现水波纹扩散点击交互动效

纯 CSS3 无法实现真正可用的水波纹点击交互动效——因为 click 事件坐标、元素内相对定位、动态圆心计算这三件事，CSS 根本做不到。

为什么 :active 或纯 @keyframes 都不行

:active 只能触发全局样式切换，不记录点击位置；@keyframes 动画本身是静态定义的，没法把 e.clientX 和 e.clientY 塞进去。iOS Safari 上 :active 还经常延迟或不触发，移动端基本不可靠。

常见错误现象：涟漪总从左上角炸开、点哪都一个位置、快速连点堆满 DOM 节点、动画一闪就消失。

伪类无法获取点击坐标，这是硬限制，不是写法问题
用 background: radial-gradient() + transition 模拟，会因重绘导致卡顿，且圆心只能写死（比如 at 50% 50%），无法跟随手指
不设 pointer-events: none 的涟漪节点会拦截后续点击，造成“点不动”假象

必须用 JS 获取坐标并创建 ripple 节点

核心逻辑是：监听 click，算出相对于目标元素内部的 x/y，动态创建并 append 到该元素内部。

关键代码片段：

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

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

下载

${x}px

一定要减去 borderLeftWidth 和 borderTopWidth，否则有边框时中心偏移
目标元素必须已设 position: relative，否则 left/top 会以页面为基准定位
别用 document.body.appendChild，涟漪必须在目标元素内部才受其 overflow: hidden 约束

CSS 动画参数怎么设才不突兀

涟漪不是越快越好，也不是越大越炫。实测最自然的组合是：

.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.15);
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: ripple-effect 0.6s ease-out forwards;
}
<p>@keyframes ripple-effect {
0% {
width: 0;
height: 0;
opacity: 0.7;
}
100% {
width: 300px;
height: 300px;
opacity: 0;
}
}</p>