Heart Pulse 同心脉冲
Five rings sharing one expanding radius, each offset by 40px so they never coincide. 五个环共用一条扩张的半径,彼此错开 40px,所以永远不会重合。
Runs live on this page. Move the pointer, click, or drag — whichever the effect listens for. 就在本页实时运行。移动鼠标、点击或拖拽——看它响应哪一种。
How it works原理拆解
Radius is (t*60 + i*40) % 200, so each ring is at a different point in the same cycle. Alpha of 1 - r/200 makes them fade exactly as they reach the edge, and the hue is derived from the same radius, so colour and size stay locked together. 半径是 (t*60 + i*40) % 200,所以每个环处在同一循环的不同位置。透明度 1 - r/200 让它们刚好在抵达边缘时消失,色相也由同一个半径推出,颜色和大小因此始终绑定。
What to change可以改的地方
- 1Add a second set with a smaller max radius to suggest a heartbeat.
- 2Decrease the 40px offset so rings bunch up into visible clusters.
- 1再叠一组最大半径更小的环,就有了心跳的双峰。
- 2把 40px 的错位改小,环会挤成几簇。
Source code源码
Self-contained — paste it into any HTML file and it runs. No libraries. 完全独立——粘进任意 HTML 文件就能跑,不需要任何库。