index.html如何添加点击反馈的波纹效果？-html教程-PHP中文网

纯 css 的 :active 无法实现中心发散波纹，必须结合 js 动态计算点击坐标并操控伪元素动画；需设置 position: relative、overflow: hidden 及 ios 兼容样式 cursor: pointer 和 touch-action: manipulation。

index.html如何添加点击反馈的波纹效果？

用 CSS `:active` 实现最简波纹，但只在点击瞬间生效

纯 CSS 方案里，:active 是最直接的点击反馈入口，但它只能触发“按下态”，无法模拟从点击点向外扩散的波纹动画。适合按钮类元素，但不满足“中心发散”需求。

常见错误是直接给 div 或 a 加 :active { background: radial-gradient(...) } —— 这样波纹永远居中，且无法随点击位置变化。

必须用 JavaScript 捕获 clientX/clientY 计算相对坐标
:active 本身不支持 transition 到 radial-gradient 的尺寸变化，得靠伪元素 + 动画
移动端需额外处理 touchstart，否则 iOS Safari 点击无响应

用 `::after` 伪元素 + JS 动态定位生成波纹层

核心思路：点击时动态创建一个圆形 ::after 伪元素，以点击坐标为圆心，初始半径为 0，然后用 transform: scale() 动画撑开，配合 opacity 淡出。

示例代码（作用于所有带 ripple 类的元素）：

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

.ripple {
  position: relative;
  overflow: hidden;
}
.ripple::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: rgba(0,0,0,0.1);
  transform: scale(0);
  transform-origin: center;
  transition: transform 0.6s, opacity 0.6s;
  opacity: 0;
}
.ripple.ripple-active::after {
  transform: scale(1);
  opacity: 1;
}

对应 JS 只需监听点击、计算偏移、加 class：

document.querySelectorAll('.ripple').forEach(el => {
  el.addEventListener('click', (e) => {
    const rect = el.getBoundingClientRect();
    const x = e.clientX - rect.left - rect.width / 2;
    const y = e.clientY - rect.top - rect.height / 2;
    el.style.setProperty('--x', `${x}px`);
    el.style.setProperty('--y', `${y}px`);
    el.classList.add('ripple-active');
    setTimeout(() => el.classList.remove('ripple-active'), 600);
  });
});