Mirror Text 镜像文字
The second copy is the first flipped vertically, with a gradient making it fade out as it descends. 第二份是第一份垂直翻转，再用渐变让它越往下越淡。
Runs live on this page. Move the pointer, click, or drag — whichever the effect listens for. 就在本页实时运行。移动鼠标、点击或拖拽——看它响应哪一种。
How it works原理拆解
transform: scaleY(-1) does the flip. The reflection is then tinted with a background-clip:text gradient running from the text colour to transparent, which is what makes it read as a reflection on a surface rather than a second heading. Opacity 0.35 finishes the illusion. 翻转靠 transform: scaleY(-1)。倒影再用 background-clip:text 的渐变从文字颜色过渡到透明，这才让它读起来像水面上的倒影，而不是第二个标题。0.35 的透明度补完最后一笔。
What to change可以改的地方
- 1Add a slight blur to the reflection to suggest a rippled surface.
- 2Reduce the gap between the two copies so they meet at a visible "waterline".
- 1给倒影加一点模糊，就像水面有波纹。
- 2把两份的间距压小，中间就会出现一条明显的「水面线」。
Source code源码
Self-contained — paste it into any HTML file and it runs. No libraries. 完全独立——粘进任意 HTML 文件就能跑，不需要任何库。