Wave Text 波浪文字
Each character becomes its own inline-block span, so each can be lifted independently. 每个字符都包成独立的 inline-block span，才能各自上下位移。
Runs live on this page. Move the pointer, click, or drag — whichever the effect listens for. 就在本页实时运行。移动鼠标、点击或拖拽——看它响应哪一种。
How it works原理拆解
The string is rebuilt every frame into spans whose transform is translateY(sin(t + i*0.5)*18). The 0.5 phase step per index is what creates the travelling wave — all characters get the same sine, just at staggered moments. Colour is hsl(i*40 + 200), a fixed rainbow across the string. 每帧把字符串重建成一堆 span，transform 是 translateY(sin(t + i*0.5)*18)。每个下标 0.5 的相位差就是「波在走」的来源——所有字符用的是同一条正弦，只是时间错开了。颜色是 hsl(i*40 + 200)，沿字符串固定铺开的彩虹。
What to change可以改的地方
- 1Increase the phase step to 0.9 for a shorter, faster wave.
- 2Keep the spans and only update their transforms instead of rebuilding innerHTML — much cheaper at length.
- 1相位步长加到 0.9，波会更短更急。
- 2保留 span 只更新 transform、别重建 innerHTML，字多的时候性能差很多。
Source code源码
Self-contained — paste it into any HTML file and it runs. No libraries. 完全独立——粘进任意 HTML 文件就能跑，不需要任何库。