这是一款基于CSS 与原生 JavaScript技术实现的图标上浮的拟态导航菜单。深色圆角底座内排列五枚图标，选中入口的圆形图标向上抬起，外圈亮起绿色，下方出现白色文字标签。CSS 负责阴影层次和过渡，脚本切换 active 类。图标已经换成本地内联 SVG，不再依赖外部图标组件脚本，可用于个人中心、工具页和专题导航的视觉原型。
拟态导航选中时的三种视觉变化
图标与标签分时出现。当前图标先上浮，文字再渐显，使状态切换具有清晰的先后关系。
亮点与内圈共同强调选中态。绿色光晕、底部亮点和圆形凹槽叠加，适合深色界面。
图标直接随页面保存。内联 SVG 使用 currentColor 跟随状态变色，替换路径即可保留现有动画。
上浮图标与白色标签如何配合切换
导航本身是一个列表，每个条目都包含图标和文字。脚本只维护当前 active，普通与选中样式分别定义图标位移、背景和标签透明度。圆形图标的伪元素负责内凹视觉，SVG 置于其上，避免选中后被装饰层盖住。
list.forEach((item) => item.classList.remove("active"));发光导航的图标、链接和颜色在哪里修改
五个入口的文字、链接和 SVG 位于 index.html，绿色主题、阴影和位移量在 style.css，点击状态在 script.js。若作为实际菜单使用，应先设置正确链接，再决定切换由页面路由还是点击事件控制。小屏规则已经压缩导航宽度与图标尺寸，新增入口时需重新分配空间。
拟态标签菜单接入真实页面的疑问
点菜单后为什么页面内容没变化？
当前只演示选中效果，链接仍是占位地址，没有路由或内容面板。接入时需要把导航状态与实际页面对应起来。
可以更换成品牌图标吗？
可以替换内联 SVG 路径，保持 viewBox、尺寸和 currentColor 规则，便于颜色继续随选中态变化。
能当手机底部导航吗？
可作为样式基础，但当前没有固定到底部，也没有适配安全区域。若用于底部导航，需要补充定位、页面留白和安全区域设置。
适合深色工具界面、个人主页与导航动效演示。完整状态样式和图标结构可下载查看。
