资讯动态

HTML5+CSS3小实例:霓虹灯管菜单导航

发布时间:2026/8/28 18:01:09 来源:尧图企业网站定制
不知道你有没有这种感觉——深夜对着暗色编辑器写代码,偶尔就想搞点"发光"的东西。不是那种浮夸的赛博朋克,就是……让界面上有一根灯管在安静地亮着。于是有了这个导航菜单。纯 HTML + CSS,没有一行 JS。先看看效果鼠标悬停上去,每个菜单项会亮起不同颜色的霓虹光晕,带脉冲呼吸动画。五种颜色,各自独立。核心思路说白了就三件事:text-shadow多层叠加→ 模拟霓虹灯管的光晕扩散CSS 自定义属性--neon-color→ 每个菜单项各自定义颜色,不写重复代码@keyframes pulse+box-shadow→ 悬停时才触发的呼吸脉冲颜色用nth-child逐个分配,红黄蓝粉紫,刚好五个。RGB 分量单独存一份--neon-rgb,是为了能在rgba()里调透明度做脉冲阴影——这是个小技巧,CSS 自定义属性不能直接塞进rgba(var(--color)

读完文章,也想定制专属网站?

尧图设计师 24 小时内与您沟通定制方案

免费获取报价