Flowing Gradient Text 流光渐变字
A gradient painted onto the background, then clipped to the shape of the glyphs. 把渐变画在背景上，再裁剪成字的形状。
Runs live on this page. Move the pointer, click, or drag — whichever the effect listens for. 就在本页实时运行。移动鼠标、点击或拖拽——看它响应哪一种。
How it works原理拆解
background-clip: text with color: transparent makes the text a window onto its own background. The background is 300% wide and slides its position from 0 to 300%, so the visible colour band travels across the letters. The 300% is essential — at 100% there would be nothing to slide through. background-clip: text 配合 color: transparent，等于让文字变成自己背景上的一个窗口。背景宽度是 300%，位置从 0 滑到 300%，可见的色带就从字上横扫过去。300% 这个值很关键——只有 100% 的话根本没有可滑的余量。
What to change可以改的地方
- 1Use background-size: 500% for a slower, more gradual sweep.
- 2Change the angle from 90deg to 45deg for diagonal light.
- 1background-size 改成 500%，扫光会变慢、更从容。
- 2角度从 90deg 换成 45deg，就是斜射的光。
Source code源码
Self-contained — paste it into any HTML file and it runs. No libraries. 完全独立——粘进任意 HTML 文件就能跑，不需要任何库。