企业官网建设流程全解析

不知道你有没有这种感觉——深夜对着暗色编辑器写代码，偶尔就想搞点"发光"的东西。不是那种浮夸的赛博朋克，就是……让界面上有一根灯管在安静地亮着。

于是有了这个导航菜单。纯 HTML + CSS，没有一行 JS。

先看看效果

鼠标悬停上去，每个菜单项会亮起不同颜色的霓虹光晕，带脉冲呼吸动画。五种颜色，各自独立。

核心思路

说白了就三件事：

1. text-shadow多层叠加→ 模拟霓虹灯管的光晕扩散
2. CSS 自定义属性--neon-color→ 每个菜单项各自定义颜色，不写重复代码
3. @keyframes pulse+box-shadow→ 悬停时才触发的呼吸脉冲

颜色用nth-child逐个分配，红黄蓝粉紫，刚好五个。RGB 分量单独存一份--neon-rgb，是为了能在rgba()里调透明度做脉冲阴影——这是个小技巧，CSS 自定义属性不能直接塞进rgba(var(--color)