液态玻璃导航栏 · 在线演示

演示了什么：这个 Demo 让你亲眼看到「液态玻璃导航」由三层效果叠出来：模糊玻璃壳、跟随指针的光斑、滑动的 active 胶囊。点击不同菜单时，视觉焦点会像 iOS 控件一样弹性移动。

关键实现：

1. css 的 .liquid-nav 使用 backdrop-filter 和多层 box-shadow，模糊负责玻璃感，内阴影负责边缘厚度；不依赖图片，主题切换也更轻。
2. js 里的 placePill 用 getBoundingClientRect() 计算按钮相对位置，而不是写死像素，所以移动端 padding 或文字变化后胶囊仍能对齐。
3. js 的 pointermove 把坐标写入 CSS 变量 --x/--y，光斑由 css 的 .glare 渐变绘制，避免每次移动都重建 DOM。

动手改一改：

1. 改 css 里 .pill 的贝塞尔曲线，把 1.25 改成 .8，会看到弹性明显变钝。
2. 改 --c1 --c2 --c3 三个颜色，玻璃折射出来的氛围会立刻换一套风格。