Flowing Aurora 极光流动
Three heavily blurred circles drifting upward — the aurora form comes from the blur, not from the shapes. 三个重度模糊的圆往上飘——极光的形状是 blur 给的,不是图形本身。
Runs live on this page. Move the pointer, click, or drag — whichever the effect listens for. 就在本页实时运行。移动鼠标、点击或拖拽——看它响应哪一种。
How it works原理拆解
Each blob is a 300px circle with filter: blur(60px) and 0.6 opacity, so the edges vanish entirely. Position is driven by x += sin(y/30) and y += 0.5, which produces a lazy diagonal wander; when y passes 300 it snaps back to 0, and the blur hides the jump completely. 每个光团是 300px 的圆,filter: blur(60px) 加 0.6 透明度,边缘因此彻底消失。位置靠 x += sin(y/30)、y += 0.5 驱动,走出懒散的斜向漂移;y 过 300 就跳回 0,而模糊把这一下瞬移完全藏住了。
What to change可以改的地方
- 1Raise the blur to 90px for an even softer, more atmospheric wash.
- 2Change the three blob colours to analogues (all blues) for a colder polar sky.
- 1blur 提到 90px,会更虚、更有大气感。
- 2三个颜色改成同类色(都用蓝),就是极地的冷调天空。
Source code源码
Self-contained — paste it into any HTML file and it runs. No libraries. 完全独立——粘进任意 HTML 文件就能跑,不需要任何库。