Holographic Gradient 全息渐变
A four-stop linear gradient whose angle simply keeps counting up. 一个四色线性渐变,角度只是不停地往上加。
Runs live on this page. Move the pointer, click, or drag — whichever the effect listens for. 就在本页实时运行。移动鼠标、点击或拖拽——看它响应哪一种。
How it works原理拆解
t increases by 0.5 every frame and is interpolated straight into the gradient angle. Nothing recalculates colours — the stops stay fixed while the whole band rotates, which is why the motion is smooth and costs almost nothing. It is the cheapest convincing holographic effect you can write. t 每帧加 0.5,直接插进渐变的 angle 里。颜色并没有重算——四个色标是固定的,转的是整条渐变带,所以既平滑又几乎不吃性能。这是最省性能、又最像全息的写法。
What to change可以改的地方
- 1Slow t to 0.15 for a subtle sheen, or speed it to 2 for a psychedelic wash.
- 2Add a second gradient layer with a different speed for interference.
- 1t 降到 0.15 是低调的金属反光,提到 2 就成了迷幻水洗。
- 2叠第二层速度不同的渐变,会产生干涉感。
Source code源码
Self-contained — paste it into any HTML file and it runs. No libraries. 完全独立——粘进任意 HTML 文件就能跑,不需要任何库。