波纹点击效果
波纹（Ripple）效果：点击瞬间从点击点向外扩散一圈水波。Material Design 的招牌交互。纯 CSS 做不到“从点击点出发”（不知道坐标），但可以做出“从中心扩散”的简化版，正式做法见 JS 特效教程。
纯 CSS 思路：:active 时用伪元素 scale(0)→scale(2.5) 播一次水波动画，圆形伪元素以中心为原点放大后淡出。
- 伪元素 absolute 居中 + border-radius:50% 做圆形水波
- @keyframes ripple：scale(0) → scale(2.5)，opacity 同步降为 0
- :active 触发、松开复位；想要“点击点定位”需要 JS
HTML
<style> .ripple { position: relative; overflow: hidden; display: block; width: 200px; margin: 50px auto; padding: 14px 0; background: #4a9eff; color: #fff; border: none; border-radius: 10px; font-size: 16px; cursor: pointer; } .ripple::after { content: ""; position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; background: rgba(255,255,255,.5); transform: scale(0); opacity: 1; pointer-events: none; } .ripple:active::after { animation: ripple .6s ease-out forwards; } @keyframes ripple { to { transform: scale(2.5); opacity: 0; } } </style> <button class="ripple">按住看水波</button>
本节要点纯 CSS 波纹 = 圆形伪元素从中心 scale 放大并淡出；定位到点击点需 JS 配合。
