纯css波纹效果需用:active伪类触发，核心是按钮设overflow:hidden+position:relative，伪元素绝对定位居中并用transform:scale()动画；否则波纹溢出或不显示。
用 :active 伪类触发波纹，但必须配合 overflow: hidden
纯 CSS 波纹效果本质是：点击时在按钮内生成一个居中放大的圆形背景（或伪元素），靠 :active 状态控制显隐和动画。但关键前提——按钮容器必须设置 overflow: hidden，否则圆形会溢出显示。很多人写了动画却看不到效果，八成卡在这儿。
常见错误现象：::after 伪元素明明有 transform: scale(0) 和 transition，点击却没反应；或者波纹从左上角开始扩散——那是因为没设 position: relative + top: 50%; left: 50% 居中定位。
- 按钮需设
position: relative，为伪元素提供定位上下文 - 伪元素用
position: absolute+top: 50%; left: 50%+transform: translate(-50%, -50%)精准居中 - 初始状态设
width: 0; height: 0; opacity: 0.2（避免 Safari 下首次点击不触发） - 动画推荐用
transform: scale()而非width/height，性能更好且兼容性稳
::after 伪元素实现波纹的最小可行代码
下面这段能直接复制进项目跑起来，已测试 Chrome/Firefox/Safari（iOS 16+）：
.ripple-btn {
position: relative;
overflow: hidden;
border: none;
background: #007bff;
color: white;
padding: 12px 24px;
border-radius: 4px;
cursor: pointer;
}
.ripple-btn::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: rgba(255, 255, 255, 0.4);
border-radius: 100%;
transform: translate(-50%, -50%);
transition: width 0.4s ease-out, height 0.4s ease-out, opacity 0.4s ease-out;
}
.ripple-btn:active::after {
width: 200px;
height: 200px;
opacity: 0;
}
注意：200px 是波纹最大直径，建议按按钮最大尺寸的 1.5–2 倍设（比如按钮宽高 40px，这里填 80–100 即可），太大在小按钮上会明显偏移。
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
移动端点击延迟与 :active 失效问题
iOS Safari 默认禁用非可点击元素的 :active 样式（包括 button 以外的 div），且存在约 300ms 点击延迟。如果按钮是 <div class="ripple-btn">，波纹根本不会动。
<ul>
<li>必须用语义化 <code><button></button> 或加 role="button" + tabindex="0"
cursor: pointer 和 -webkit-tap-highlight-color: transparent 消除高亮干扰pointer-events: none 或 CSS 动画层叠遮挡波纹颜色无法随按钮背景动态变化？别硬编码 rgba
写死 rgba(255, 255, 255, 0.4) 在深色主题下就看不见了。CSS 变量是解法，但注意：伪元素无法继承自定义属性，得手动传入。
方案是把颜色值通过 style 属性注入，再用 var(--ripple-color, rgba(255,255,255,0.4)) 回退：
<button class="ripple-btn" style="--ripple-color: rgba(0,0,0,0.2);">深色按钮</button>
.ripple-btn::after {
background: var(--ripple-color, rgba(255,255,255,0.4));
}
复杂点在于：如果你用 CSS-in-JS 或主题切换系统，得确保变量同步更新到每个按钮的 style 上——纯 CSS 没法自动推导“按钮背景色的反色”。
