Water Ripple 水波纹
Three rings per click, all centred on the same point but expanding at slightly different times. 每次点击生出三圈涟漪，圆心相同，只是扩散的起始时机略有差别。
Runs live on this page. Move the pointer, click, or drag — whichever the effect listens for. 就在本页实时运行。移动鼠标、点击或拖拽——看它响应哪一种。
How it works原理拆解
Each ring starts at 10px with a 2px teal border and an absolute position translated by -50% so its centre lands on the cursor. The growth loop adds 4px per frame and sets opacity to 1 - size/300, which means the ring is fully opaque when small and invisible exactly at 300px. 每圈从 10px 起步、2px 青色描边，绝对定位再用 translate(-50%,-50%) 把圆心对齐鼠标。扩散循环每帧加 4px，同时把透明度设成 1 - size/300，也就是刚生出时最实，到 300px 刚好完全消失。
What to change可以改的地方
- 1Stagger the three rings with a setTimeout delay for a clear trailing effect.
- 2Change the border to 1px and raise the growth step for a sharper, more technical look.
- 1三圈之间加一点 setTimeout 延迟，拖尾层次会更清楚。
- 2描边改成 1px 并加大扩散步长，会变成更锐利、更「科技感」的水波。
Source code源码
Self-contained — paste it into any HTML file and it runs. No libraries. 完全独立——粘进任意 HTML 文件就能跑，不需要任何库。