Tunnel Warp 隧道穿梭
Thirty circles whose radius cycles through 0–600, with opacity falling off as they expand. 三十个圆,半径在 0–600 之间循环,越往外越透明。
Runs live on this page. Move the pointer, click, or drag — whichever the effect listens for. 就在本页实时运行。移动鼠标、点击或拖拽——看它响应哪一种。
How it works原理拆解
Radius is (i*20 + t*60) % 600, so rings continuously emerge at the centre and grow outward. The modulo is what makes it seamless — a ring that reaches 600 reappears at 0 without any bookkeeping. Alpha of 1 - r/600 means a ring is born bright and invisible by the time it fills the canvas. 半径是 (i*20 + t*60) % 600,所以圆环不断从中心冒出、向外扩大。取模是它无缝的原因——扩到 600 的环自动回到 0,不需要任何额外管理。透明度 1 - r/600 让环刚出生时最亮、铺满画布时正好消失。
What to change可以改的地方
- 1Raise the 30 ring count and the tunnel gets denser without overlapping.
- 2Use an ellipse instead of arc to fake a tilted tunnel.
- 1环数提到 30 以上,隧道会更密而不会重叠。
- 2把 arc 换成椭圆,就是一条倾斜的隧道。
Source code源码
Self-contained — paste it into any HTML file and it runs. No libraries. 完全独立——粘进任意 HTML 文件就能跑,不需要任何库。