用::after伪元素+transform:scale()实现悬停波纹，需设content:""、position:absolute、inset:0（或四边全写）、border-radius匹配、transform:scale(0)、opacity:0.3，并加overflow:hidden到按钮父容器以裁剪圆角溢出。
用 ::after 伪元素 + transform: scale() 实现波纹扩散
核心思路是：点击（或悬停）时，让覆盖在按钮上的伪元素从中心点开始放大，同时配合 opacity 淡出，模拟水波扩散效果。关键不是“点击”，而是“悬停触发”，所以要用 :hover 控制动画起点。
常见错误是直接对按钮本身做 scale，这会拉伸文字和边框；必须用绝对定位的伪元素盖住按钮区域，再单独缩放它。
- 伪元素需设
content: ""、position: absolute、inset: 0（或top/left/right/bottom: 0），并用border-radius匹配按钮圆角 - 初始状态设
transform: scale(0)、opacity: 0.3，避免鼠标未悬停时意外显示 - 动画用
transition: transform 0.4s ease, opacity 0.4s ease，不推荐animation（难精准控制触发时机） - 为防止多次悬停触发多层波纹，加
pointer-events: none到伪元素上
inset 和 top/left/right/bottom 在伪元素定位中的实际差异
inset 是 top/right/bottom/left 的简写，但浏览器兼容性有坑：Safari 14.1+ 才支持 inset，旧版 Safari 或 iOS WebView 会直接忽略，导致伪元素不显示。
如果项目需兼容 iOS 13–14 或 Electron 旧版本，必须写全四边：
button::after {
top: 0; right: 0; bottom: 0; left: 0;
}
而现代项目（如仅支持 Safari 15.4+）可用 inset: 0，更简洁且语义清晰。别盲目用 inset，先查目标环境的 Can I Use 数据。
悬停波纹 vs 点击波纹：触发逻辑和性能区别
悬停波纹（:hover）本质是 CSS 触发，无 JS 参与，渲染开销低，但无法记录“是否已播放过”，反复进出会重复动画；点击波纹（常配合 JS 添加 class）可控制播放次数、延迟、或结合 setTimeout 防抖。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
如果你只需要视觉反馈，:hover 足够；但若按钮有业务逻辑（比如提交前防重复点击），伪元素波纹必须和 JS 状态联动，否则用户可能误判操作是否生效。
- 悬停波纹：适合纯 UI 装饰，如导航菜单、图标按钮
- 点击波纹：适合表单按钮、交互控件，需配合
disabled状态同步禁用伪元素动画 - 两者都建议加
will-change: transform到伪元素，避免 Chrome 下偶发的缩放闪烁
圆角按钮波纹变形？overflow: hidden 必须加在父容器上
当按钮设了 border-radius: 8px，伪元素 scale(2) 会超出圆角边界，露出尖角——这不是动画问题，是裁剪问题。
解决方法只有一条：给按钮本身加 overflow: hidden。别指望伪元素自己裁剪，它的渲染层在按钮内部，裁剪边界由父元素决定。
注意：overflow: hidden 可能影响内部其他绝对定位元素（比如 tooltip），若按钮内还有浮动弹层，得改用 clip-path: inset(0 round 8px) 替代，但 IE 不支持。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
