HTML中details标签的点击波纹效果如何用CSS实现-html教程-PHP中文网

details标签不支持原生点击波纹，需用js监听summary的click事件动态计算点击坐标，结合position: relative与::after伪元素缩放动画实现兼容性最佳的波纹效果。

html中details标签的点击波纹效果如何用css实现

details标签本身不支持原生点击波纹

HTML <details></details> 是语义化折叠组件，浏览器只提供默认的箭头展开/收起行为，没有内置波纹（ripple）效果。所谓“点击波纹”，其实是 CSS 模拟的视觉反馈，必须手动添加，且不能依赖 :active 简单实现——因为 <summary></summary> 在部分浏览器中点击时不会稳定触发 :active（尤其 Safari 和 Firefox 对 <summary></summary> 的激活态处理不一致）。

用伪元素 + transition 模拟波纹最可靠

核心思路是：监听 <summary></summary> 的点击，用 JS 添加一个临时类，CSS 通过 ::after 绘制圆形遮罩并缩放动画。这是目前兼容性最好、行为最可控的方式。

必须给 <summary></summary> 设置 position: relative，否则波纹定位会错乱
波纹圆心需动态计算点击坐标，不能写死为 50% 50%，否则在长文本或右对齐的 <summary></summary> 上偏移明显
动画时长建议 ≤ 300ms，过长会干扰用户对折叠动作的感知
务必加 pointer-events: none 到波纹伪元素上，避免遮挡后续点击

.summary-ripple {
  position: relative;
}
.summary-ripple::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.1);
  transform: scale(0);
  transform-origin: center;
  pointer-events: none;
  transition: transform 0.25s ease-out;
}
.summary-ripple.ripple-active::after {
  transform: scale(1);
}

JS 必须监听 summary 的 click 并计算点击点

不能用 mousedown 或 touchstart——<summary></summary> 的折叠逻辑由浏览器在 click 时触发，只有在这里插入波纹类，才能和真实交互节奏对齐。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

获取 event.clientX / clientY 相对于 <summary></summary> 左上角的偏移，再减去 getBoundingClientRect() 的 left/top
把计算出的 x、y 作为 left 和 top 设置到伪元素上（需 JS 动态写内联 style）
添加类后，用 setTimeout 在动画结束后移除类，避免类堆积
注意处理 touch 设备：event.touches[0] 取坐标，但要 fallback 到 clientX/Y