涟漪动画需用绝对定位子元素实现，禁用::after伪元素；初始宽高为0且用transform:scale(0)隐藏；按钮设overflow:hidden；动画需同时控制scale和opacity；javascript须用touchstart+getboundingclientrect计算中心点；需设will-change:transform和transform-origin:center；时长≤450ms。
涟漪元素必须用绝对定位覆盖在按钮上
直接在按钮内部用 ::after 伪元素加动画，容易被文字层遮挡或触发重排。正确做法是手动加一个 <span class="ripple"></span> 子元素，并设为 position: absolute，同时按钮父容器需设 position: relative。
关键点：
- 涟漪元素初始
width和height必须为0，否则动画起点不自然 - 必须用
transform: scale(0)而非opacity: 0控制隐藏，否则无法触发硬件加速 - 按钮需设
overflow: hidden，否则涟漪可能溢出圆角边界
keyframes 动画要同时控制 scale 和 opacity
只缩放不透明度会显得生硬；只改透明度则没有扩散感。标准涟漪需要从中心点“炸开”并渐隐，所以两个属性都要动。
推荐的 @keyframes ripple 写法：
@keyframes ripple {
0% {
transform: scale(0);
opacity: 0.6;
}
100% {
transform: scale(3);
opacity: 0;
}
}
注意：scale(3) 是经验值，太小（如 1.5）看不出扩散，太大（如 5）在小屏上容易撑破容器；opacity 起始值别低于 0.4，否则点击反馈太弱。
JavaScript 动态计算涟漪起始位置
移动端触摸事件坐标和鼠标不同，不能直接用 clientX/clientY。必须用 touches[0] 并减去按钮左上角偏移，否则涟漪总从左上角开始。
核心逻辑：
- 监听
touchstart（不是click，后者有 300ms 延迟且坐标不准） - 用
element.getBoundingClientRect()获取按钮视口位置 - 涟漪
left=touch.pageX - rect.left - rippleSize/2 - 涟漪
top=touch.pageY - rect.top - rippleSize/2 -
rippleSize建议取按钮宽高的较大值 × 1.2，保证全覆盖
真机上动画卡顿？检查 will-change 和 transform-origin
iOS Safari 和部分安卓 WebView 对 transform 动画优化差，常见表现是涟漪边缘锯齿、掉帧、甚至不触发。
必须加的修复项：
- 涟漪元素加
will-change: transform（仅动画期间设，结束后移除，避免内存泄漏） - 确保
transform-origin是center center，否则 scale 不以点击点为中心 - 禁用
-webkit-tap-highlight-color: transparent，否则 iOS 点击高亮会干扰涟漪视觉 - 动画时长控制在
450ms以内，超过易被系统判定为“非响应式操作”
复杂点在于：不同机型对 transform 层级的 GPU 加速策略不一致，有些必须把涟漪元素提升到独立合成层（靠 translateZ(0) 或 will-change），有些反而因此引发闪烁——得实测调整。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
