这是一款用 CSS Anchor Positioning API 做的菜单指示器特效：六项磨砂玻璃质感的菜单卡片竖排，右侧有一枚指向左方向的手指 emoji，鼠标悬停到哪一项，手指就会平滑滑到那一项的右侧并对齐中心。整段没有一行 JS——`anchor-name` 把当前 hover 的菜单项声明为锚点、`position-anchor` 让手指跟随该锚点、`top: anchor(center)` 和 `left: anchor(right)` 决定跟随的锚点位置。是全新 CSS Anchor API 的极简教学范例，也是任何侧边导航都能拿来即用的一段亮眼交互。
这款 anchor 菜单的四个亮点
核心只有三行 CSS：`.item:hover { anchor-name: --item-hovered; }`、`.follower { position-anchor: --item-hovered; top: anchor(center); left: anchor(right); }`——浏览器原生完成锚点跟随，无需任何脚本或 ResizeObserver。
初始状态用 `.item:first-child { anchor-name: --item-hovered; }` 提供默认锚点，页面加载时手指就锚在第一项，避免出现空位。
菜单卡片带磨砂玻璃质感：`backdrop-filter: blur(1px)`、`background-color: #fff3`、`box-shadow: 2px 2px 5px #0002` 三件套，配合悬停时 `scale(1.03)` 微微凸起，交互反馈自然。
背景是径向渐变的水滴纹理 + 45° 斜蓝粉渐变叠加，配合 Aboreto 衬线字体，整体像一张手工水彩海报。
CSS Anchor Positioning 的三个门道
其一，`anchor-name` 是「谁被跟随」，`position-anchor` 是「谁去跟」，两者是解耦的——同一个 anchor-name 可以被多个 position-anchor 引用；本模板巧妙地在 hover 时动态给菜单项贴 anchor-name，实现「跟随当前 hover」。其二，`top: anchor(center)` 里的 `center` 是 anchor 边界的中点位置，不是 anchor 元素中心的绝对坐标——所以 `.follower` 上还需要 `transform: translateY(-50%)` 才能视觉居中。其三，Anchor API 是 CSS 层动画，帧率稳定，比 JS 每帧改 top/left 或 transform 更省 CPU，视觉更流畅。源码中均有注释可以参考完整实现。
换成自己的菜单要动哪里
菜单项在 `.wrapper` 内的六个 `.item`，改文字即可；数量任意增减不影响 anchor 逻辑。要换指示器图标，把 `.follower` 内容从 👈 换成任意 emoji 或 ``。要指示器从左侧跟随，改 `.follower` 的 `left: anchor(right)` 为 `right: anchor(left)`，同时调整位移方向。要改高亮色，`.item.active` 或者 `.item:hover` 里的 `background-color` 换成品牌色即可。字体从 Aboreto 换到系统字体，`font-family` 改为 `system-ui` 或加中文回退 "PingFang SC", "Microsoft YaHei"。
浏览器兼容性：CSS Anchor Positioning API 需 Chrome 125+、Edge 125+；Safari 与 Firefox 尚未完全支持，会显示为手指停在初始位置的降级状态，功能不破坏。详细运行方法请参见压缩包内的帮助文档。
常见问题
Safari/Firefox 用户看到的是什么
手指停在第一项右侧不动，菜单本身仍可正常点击/悬停。整体功能没有破坏，只是缺一段动画。可选：给这些浏览器写 JS 兜底跟随，本源码没有包含以保持极简。
能给菜单加点击态而不只是 hover 吗
能。给 `.item.active` 也加 `anchor-name: --item-hovered`，JS 里点击时切换 active 类即可；hover 与 click 可以共存。
指示器能跟着当前项左侧或者上方吗
能。改 `.follower` 的 `left`/`top` 使用不同的 `anchor()` 关键字（`start`、`center`、`end`、`self-start` 等），几乎所有相对锚点位置都能表达。
菜单文字太长会溢出吗
不会溢出容器，但会自动换行。可以给 `.item` 加 `white-space: nowrap` 强制单行，或 `text-overflow: ellipsis` 截断。
适合放在哪些页面
适合官网侧边导航、SaaS 后台的一级菜单、博客栏目切换、活动楼层导航、任何「视觉指示器需要跟随当前项」的场景。下载源码后可作为独立模块嵌入任何 HTML 页面。
