屏幕中央是一只暗红色调的转盘：外圈是八个胶囊形的栏目按钮，正中间是一块圆形表盘，显示当前所在栏目，下面配一对左右箭头；圆盘正上方立着一枚小三角指针。点击任意栏目，整圈会带着弹性缓动旋到那一项正对指针，被选中的胶囊放大、亮起品牌色并带上一圈光晕，中间的表盘同步换成新的栏目名。左右箭头则一次转一格。

两处细节让它比多数环形菜单更耐看：一是按钮本身会反向旋转，圆盘转到哪个角度，文字都保持水平，不会跟着歪；二是旋转永远走最短路径，从最后一项跳回第一项时是继续向前转一格，而不是倒回去转七格。

这只转盘导航的四个要点

环形排布全靠 CSS 三角函数。每个条目在标签上写一个序号，样式用序号乘以单格角度得到它的方位角，再用 cos 与 sin 乘以半径算出位移——加一项减一项只需改一个总数变量。
文字水平靠反向补偿。圆盘的旋转角度存在一个自定义属性里，按钮把这个值取负后应用到自身，两层旋转互相抵消，而且两者共用同一条缓动曲线，过程中也不会出现歪一下再回正。
角度是累加的，不取模。脚本记录的是一个可以无限增长或减小的连续角度，每次只计算“这次该转多少”，因此动画方向可控，也不会在跨越 360 度时突然回弹。
无障碍没被忽略。按钮带按下状态标记，另有一块视觉上隐藏、但屏幕阅读器可读的实时区域，切换时会播报当前选择；系统开启减弱动效时所有过渡自动缩短。

最短路径和反向补偿是怎么实现的

其一，最短路径靠一次角度归一化。目标角度减去当前角度得到一个差值，这个差值可能是 315 度这种“绕远路”的值，脚本把它折算回正负 180 度区间：

delta = (((delta % 360) + 540) % 360) - 180;

加 540 再取模是为了让负数也落到正确区间（直接取模在负数上会得到负余数）。折算后 315 度就变成 -45 度，转盘于是反向转一格，这正是人眼期待的方向。得到差值后累加到总角度上，而不是直接赋值——这一步是“不回弹”的关键。

其二，反向补偿必须写在按钮上而不是文字容器上。因为条目本身要负责环形定位（用了位移），把旋转再叠上去会影响定位的参考系。源码的做法是：外层的列表项只做位移，内层的按钮只做反向旋转，职责分开，两者互不干扰。

其三，缓动曲线选得很讲究。用的是一条先冲后稳的贝塞尔曲线，前段速度快、尾段缓慢收住，模拟出转盘有惯性、最后被卡榫定住的感觉。若换成普通的 ease，会明显觉得“软”；换成线性则像机器在走步。

拿到源码后能改什么

增删栏目只要两步：在列表里加一个条目并写上它的序号，再把导航容器上的总数改成新的数量。半径、圆盘直径、表盘大小分别是几处像素值，改半径时记得同步调整指针的位置。

配色使用了 oklch 色彩空间，主色只有一个变量，改它就能整体换风格——oklch 的好处是调亮度时颜色不会发灰。背景是两层同心的径向渐变，深色底更能衬出选中项的光晕。

交互上还有几个容易加的增强：给转盘绑定滚轮事件实现滚动切换、给方向键绑定上一项下一项、点击中央表盘触发跳转。脚本本身只有三十来行，结构清晰，扩展时不需要重构。若要接入真实路由，在选中回调里加跳转即可。

运行提示：环形排布依赖 CSS 的 cos()、sin() 数学函数以及 oklch 颜色，需要较新版本的浏览器；旧版浏览器上条目会全部叠在圆心。页面为普通脚本，可直接双击 index.html 打开，无需服务器。建议使用近两年版本的 Chrome、Edge、Firefox 或 Safari。详细运行方法请参见压缩包内的帮助文档。

关于转盘导航的常见问题

栏目太多会挤在一起吗？

会。八到十项是这个半径下比较舒服的密度，再多就需要同时加大半径或缩短文字。也可以改成两层同心圆，把外层半径调大、内层用另一套序号即可。

能改成半圆或扇形吗？

可以，把方位角公式里的 360 度换成 180 度并调整起始偏移即可。当前起始偏移是负 90 度，也就是第一项在正上方，改这个值可以让起点落在任意方向。

手机上好用吗？

点击没有问题，但 340 像素的圆盘在窄屏上会占掉大半屏幕。建议加一条媒体查询按视口宽度缩小半径与字号，或者在移动端换成普通列表。

为什么我的浏览器里所有按钮都堆在中间？

这是不支持 CSS 三角函数的表现。可以做一层降级：用 @supports 检测后，不支持时改用传统的定位方式或直接退回竖排菜单。

这个导航适合用在哪里

它适合入口数量固定、需要仪式感的场景：影音平台的频道选择、智能家居面板的模式切换、展会大屏的分区导航、活动页的抽奖式入口。因为是纯 DOM 加 CSS 实现的，接进现有站点比 Canvas 方案省事得多，也天然支持键盘操作。三角函数排布、反向补偿与最短路径的完整写法都在源码里，下载后可查看。