ARTICLE DETAIL

资讯详情

深耕编程入门与网站建设的一线实战洞察。

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

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