最近我在做活动落地页的时候被设计师一句话问住了“标题这里能不能做成霓虹聚光灯鼠标移到哪字就亮到哪要有点手电筒扫过去的感觉但又不能太花。”看着很神奇拆开之后发现原理并不复杂。这个效果其实就是“霓虹发光 聚光灯遮罩 交互跟随”三件事的叠加重点在于怎么把三件事融进一段小而美的 CSS 里。这篇文章我不打算只丢代码我会把每一步为什么这么做、哪些参数可以调、哪些坑会让效果直接翻车都讲一遍按我的思路复现出来以后在做首页大标题、导航高亮、品牌宣传页、个人作品集这些场景时都能直接抄。1. 效果拆解先别动手把“霓虹聚光灯”翻译成技术语言1.1 一个视觉动效背后其实是三个独立需求我第一次拿到这个需求时脑子里浮现的是夜景霓虹灯牌和一束手电光。真正落到代码上那些“好看”的感觉全部来自非常具体的视觉元素。把“霓虹聚光灯”翻译成前端语言其实是三层东西第一层是基础文本以及文本外围的霓虹光晕。霓虹感的本质是“颜色本身 多层发光”常用text-shadow模拟灯管边缘的漫射光一层小光晕、一层中光晕、一层大范围光晕加出来就有灯管通电的感觉。第二层是聚光灯区域。它需要在一个局部范围内把文字变得更亮、更清晰或者直接换一种颜色让那个区域像被光打中了一样。这一层通常是通过radial-gradient圆形渐变实现的渐变中心就是所谓“光斑”所在的位置。第三层是交互跟随。鼠标或手指移动时光斑位置需要实时更新。要做到这一点最优雅的做法是 CSS 变量 JavaScript 事件绑定而不是让 JavaScript 去改动一大堆内联样式。把这三件事拆开之后整个方案就非常清晰了。难点不再是“怎么做”而是怎么在不牺牲性能、不搞坏文字可读性的前提下让三层效果自然融合。1.2 为什么这种效果比普通 hover 变色更抓人很多团队处理标题高亮时第一反应是写一个:hover变色比如鼠标悬停时文字从灰色变成亮色。这当然能用但交互感非常“平”因为它缺少一个连续反馈过程。聚光灯效果好在哪里它把“哪里有光”和“你的注意力在哪里”强行绑定在一起。用户移动鼠标光斑跟着移动文字表面被照亮的范围也在变化。这个变化是连续、即时、带有物理感的哪怕没有其他动画用户也会觉得页面“活了”。而且这种效果有一个很实用的价值它不会遮挡文字内容也不会让用户花时间去找隐藏交互。光斑本身就是交互引导手一放上去视觉重心立刻被引导到标题上。适合用来强调某个核心信息比如活动主题、产品 slogan、课程名称而不需要额外设计图标或箭头。2. 方案怎么选三种常见实现方式我为什么选了现在这种2.1 三条路都能做但代价完全不同实现聚光灯效果比较常见的有clip-path、mask、background-clip: text三种方案。很多人一上来就挑一个结果做到一半发现问题比如边缘硬、文字重影、移动端不兼容然后又推翻重来。我建议先看一眼三者的差异再决定用哪条路。clip-path是最直观的方案在文字上层放一个样式完全不同的副本用一个 circle 裁切出可见区域再把圆心坐标跟着鼠标移动。这个方案的优势是思路简单性能也相当不错。但它有一个硬伤就是边缘只能做到硬切虽然可以配合filter做模糊但本质上还是“被裁剪出来的圆”很难实现从高亮到暗部自然过渡的渐变光感。mask的方案是用一个radial-gradient作为遮罩让上层文字按渐变透明度显示。这个思路比clip-path更像真实的聚光灯因为边缘是渐变的光斑柔和很多。缺点是对兼容性要求更高一点需要在mask-image和-webkit-mask-image之间做前缀处理而且一旦层级多排错会有点绕。第三种就是background-clip: text这种方法最优雅把渐变背景直接裁剪到文字的笔画轮廓内让文字本身填充成渐变颜色。它不需要额外的遮罩元素也不需要裁切天然支持柔边。缺点是要记住加-webkit-background-clip: text前缀否则现代浏览器虽然默认支持了旧版本还是会踩坑。2.2 我为什么选了“两层文字 background-clip”的组合我最终选择的是两层文字方案结构非常小一个是带霓虹光晕的基础层一个是使用background-clip: text实现局部高亮的聚光灯层。基础层负责让整段文字保持霓虹感即使没有鼠标移动它看起来也像一个亮着的霓虹灯牌。聚光灯层负责在光标周围制造一个高亮区域让光斑中心的文字更亮、更白、更有“被照射”的感觉。可能有人会问为什么不直接在聚光灯层也加上text-shadow让光斑内部再叠一层发光我试过结果非常致命因为聚光灯层本身是透明文字加背景裁剪text-shadow会作用在整个文字路径上导致所有文字都被照亮聚光灯的范围感完全消失。所以正确做法是把霓虹发光放在基础层把颜色变化和亮度变化放在聚光灯层各司其职。因此前面有叙述了“为什么基础层要有 glow, spot only color”。这套分层也让代码变得极度可维护调颜色只动 CSS 变量调光斑大小只动一个半径变量不需要去翻 JS 逻辑。2.3 两个一开始就容易被忽略的兼容点第一background-clip: text的浏览器前缀问题。现在的 Chrome 和 Firefox 新版都可以不用前缀但为了稳稳兼容代码里必须同时写上-webkit-background-clip: text和background-clip: text。如果只写后者在旧内核浏览器里打开聚光灯层会直接变成一个漫色矩形把文字糊死。第二文字层叠顺序。聚光灯层要放在基础层之后才能盖在霓虹光晕上面。如果层叠顺序反过来基础层的text-shadow会直接穿过聚光灯层聚光灯区域内的文字会被光晕污染看起来像曝光过度的照片。3. 完整实现从 HTML 骨架到 JS 性能优化一条线走通3.1 DOM 结构怎么写才能兼顾语义和无障碍先给出 HTML。核心思路是同一段文字出现两次一次作为基础霓虹层一次作为聚光灯层但屏幕阅读器不应该把这段文字读两遍所以要对复制出来的那一层做aria-hiddentrue。h2 classneon-spotlight aria-label霓虹聚光灯 span classns-base aria-hiddentrue霓虹聚光灯/span span classns-spot aria-hiddentrue霓虹聚光灯/span /h2外层我用的是h2因为活动页里的核心标语通常就是一个大标题。如果你要做导航文字或小按钮上的效果换成span或a都可以样式部分不变。两个span会通过 CSS Grid 的grid-area叠在同一个位置。这里我选择display: inline-grid而不是position: absolute定位。原因很简单如果用绝对定位碰到多行换行、不同字体大小、不同 padding 的时候两层文字稍微错位几个像素就会非常明显用 Grid 堆叠两层文字天然占据同一个网格区域行高不一致问题也基本不存在。3.2 CSS 变量搭出整个调试链路把可调参数全部抽到 CSS 变量中是我做所有 CSS 动效的默认习惯。这样做的好处是后续你想把“霓虹聚光灯”变成“蓝色聚光灯”或“粉色聚光灯”不需要改动结构只需覆盖几个变量。.neon-spotlight { --nl-color: #0ff; --nl-color-deep: #06f; --nl-radius: 180px; --nl-x: 50%; --nl-y: 20%; display: inline-grid; position: relative; margin: 20vh auto 0; font-family: PingFang SC, Microsoft YaHei, sans-serif; font-size: clamp(3rem, 9vw, 7rem); font-weight: 900; letter-spacing: 0.06em; line-height: 1.3; cursor: crosshair; user-select: none; } .neon-spotlight span { grid-area: 1 / 1; white-space: pre-wrap; }这里要特别提一下--nl-x和--nl-y它们初始值是百分比形式的 “50% 20%”。也就是说页面刚加载、鼠标还没进入标题区域时光斑会停在标题中间偏上的位置而不是乱跳到某个角落。font-size我用clamp()做了响应式处理最小 3rem最大 7rem中间随视口宽度变化。这样可以保证手机端不溢出大屏幕上又有足够的气场。3.3 基础层写光聚光灯层写亮基础层的核心是text-shadow多层叠加。很多人以为霓虹效果是加一层大模糊就够了其实不是。真实霓虹灯管之所以有体积感是因为它从中心到边缘有三种衰减层次紧贴文字的高强度光、稍远一点的中等强度光、再往外扩散的微弱气氛光。.ns-base { color: #f8fbff; text-shadow: 0 0 6px var(--nl-color), 0 0 18px var(--nl-color), 0 0 45px var(--nl-color-deep); }第一层0 0 6px让笔画边缘发亮第二层0 0 18px制造灯管周围的主光圈第三层0 0 45px把颜色大面积柔和地拓开。这里我把颜色拆成--nl-color和--nl-color-deep两个变量因为同一种颜色在不同叠加高度下视觉效果会差很多。比如青色浅层用#0ff深层用#06f层次就会很舒服如果三层全用#0ff会显得又刺眼又死板。聚光灯层代码如下.ns-spot { background: radial-gradient( circle var(--nl-radius) at var(--nl-x) var(--nl-y), rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.45) 35%, transparent 72% ); -webkit-background-clip: text; background-clip: text; color: transparent; }这段代码的核心在于background-clip: text。它的意思是“把背景图裁剪到文字形状内”然后因为color: transparent文字本体变成透明背景里的渐变就会透过笔画显示出来。渐变我用的不是从有到无的生硬过渡而是三段式光斑中心接近纯白到 35% 处变成半透明白到 72% 处完全透明。这样光斑扫过去的时候边缘会有一段柔和的衰减看起来像真实光圈而不是一把裁纸刀。你可能会想聚光灯层文字内部没有光晕是不是显得不够“霓虹”其实不会。因为基础层的霓虹光晕一直存在于底部聚光灯层只负责局部提亮两者叠加以后光斑扫过的地方会变得更白更亮而其它地方依然有霓虹气氛这才是“聚光灯照射在霓虹灯管上”的正确观感。3.4 JS 端做到逐帧更新而不是事件一响就立刻操作接下来是交互部分。需求很简单鼠标或手指移动时更新--nl-x、--nl-y两个 CSS 变量。如果直接监听mousemove事件每秒可能触发几十上百次每次都要读一次getBoundingClientRect()又会引发重排性能好的机器还好普通笔记本和手机就容易出现光斑“掉帧”或卡顿。更好的做法是用requestAnimationFrame做节流保证每帧最多更新一次同时把最新坐标缓存下来。这样即使浏览器丢掉了部分事件我们用的也永远是最新位置光斑会更平滑。const title document.querySelector(.neon-spotlight); let rafId 0; let latestX 0; let latestY 0; function syncSpot() { const rect title.getBoundingClientRect(); const x latestX - rect.left; const y latestY - rect.top; title.style.setProperty(--nl-x, ${x}px); title.style.setProperty(--nl-y, ${y}px); rafId 0; } title.addEventListener(pointermove, (e) { latestX e.clientX; latestY e.clientY; if (rafId) return; rafId requestAnimationFrame(syncSpot); }); title.addEventListener(pointerleave, () { title.style.setProperty(--nl-x, 50%); title.style.setProperty(--nl-y, 20%); });用pointermove而不是mousemove是因为它同时覆盖鼠标、触屏笔和手指触摸。移动端上手指在标题上一划光斑照样能跟着走不需要额外写touchmove。鼠标离开标题时我让光斑回到初始的 “50%, 20%”这样用户再回来时不会出现光斑从旧位置跳到新位置视觉上会自然一些。4. 继续进阶换色、换半径、自动巡航一个变量搞定4.1 常用参数配置速查表我整理了一份常用配置直接把变量值换掉就能得到完全不同的气质。这套配色和参数是我实测下来比较稳的组合你可以在这个基础上继续微调。想要的感觉--nl-color--nl-color-deep--nl-radius适用场景赛博霓虹#0ff#06f180px科技峰会、AI 产品页复古粉管#ff2d99#7a1fa0150px潮流品牌、音乐演出绿色氛围#6fdd8b#0a7a3d200px环保、露营活动低调银蓝#9be9ff#345d9e140px个人作品集、工作室首页这里有个规律--nl-color用于内圈高光颜色越亮越好--nl-color-deep用于外圈扩散饱和度要低一点否则整个标题会像一团雾看不清字形。--nl-radius决定光斑半径大小如果标题很长建议不要小于文字高度的 1.5 倍。光斑太小会导致每次只照亮两三个字缺少整体感太大又会变成全亮失去聚光灯的层次。常见的标题180px 是一个很稳的起点。4.2 给效果加一点点“霓虹灯闪烁”的氛围霓虹灯最让人着迷的点之一是它不是恒定的而是有轻微闪烁的。这个闪烁如果是真随机会让人觉得页面不稳定但如果做成有节奏的呼吸或短促抖动氛围会非常加分。我常用的做法是单独给ns-base加一个透明度动画强度控制得特别低只让它像旧灯管那样偶尔抖一下keyframes neon-breathe { 0%, 100% { opacity: 1; } 92% { opacity: 1; } 93% { opacity: 0.72; } 95% { opacity: 0.96; } 97% { opacity: 0.8; } 98% { opacity: 1; } } .ns-base { animation: neon-breathe 3.2s steps(1) infinite; }注意我用了steps(1)意思是动画只在关键帧切换的瞬间跳变而不是平滑渐变。这样才能模拟出灯管通电瞬间那种“哒哒”抖动而不是普通的呼吸式明暗。这个动画可以不套在背景层上因为聚光灯层的 action 已经属于交互反馈再叠闪烁会让注意力被抢走。要把“环境氛围”和“用户主动交互”分开处理这是做页面动效的一个底层原则。4.3 多行标题怎么处理Grid 的优势在这儿很多标题不是一行能放下的尤其是中文 slogan 或品牌宣言。如果用position: absolute做上层文字行数一变像素级对齐立刻出问题。而我在 HTML 结构里已经用了display: inline-grid和grid-area: 1 / 1两层文字共享同一个网格区域不管文字换行成几行都会自动保持完全重叠。需要注意一点基础层和聚光灯层的white-space必须一致。如果基础层是nowrap聚光灯层是pre-wrap两边的换行点不同光斑位置会正常但文字形状错位会非常明显。我把两条文字都统一成pre-wrap就是为了保留自然换行的能力同时不改变空格行为。如果标题很长建议把--nl-radius稍微调大或者把渐变里的 35% 透明位置往后挪一点让光斑覆盖范围更宽这样用户一眼就能看到当前聚焦的段落主题。5. 常见问题与排障笔记这些坑我替你先踩完了5.1 问题排查速查表我用得越多越发现这类 CSS 特效的问题往往集中在少数几个点上。为了少走弯路我把最常见的现象和原因整理成了一张表遇到问题可以先照着对一遍。现象常见原因解决方法聚光灯层文字完全不显示background-clip: text前缺-webkit-前缀或背景图没有铺满元素两个前缀都写上给背景加background-size: 100% 100%光斑出现在标题外面位置对不上CSS 变量设置的单位与渐变位置单位不一致确认--nl-x是px而不是类似clientX的全局值鼠标在标题上移动时严重掉帧mousemove回调里直接操作 DOM没有节流改用requestAnimationFrame节流缓存最新坐标基础层光晕把聚光灯层“糊住”聚光灯层和基础层层叠顺序不对或聚光灯层也加了text-shadow把.ns-spot放在后面只在基础层加光晕移动端点击标题时页面选中文字没有禁用user-select或没加pointer-events处理标题容器加user-select: none但需注意无障碍信息仍需保留字体换行后两层文字错位white-space或letter-spacing不一致统一设置在.neon-spotlight span上5.2 关于“透明度”的一个隐藏知识我在做聚光灯层时没有用opacity而是用背景渐变里的透明度来控制明暗。原因很简单如果给整层加opacity: 0.5所有文字都会变得半透明包括光斑中心的文字也会变灰而用渐变透明度控制是让光斑外部逐渐消失中心的文字始终保持高亮文字颜色。这个差异看起来很小实际观感差别很大。光斑本质上是一道“光源”光源中心永远应该是清晰的只有边缘才需要衰减。如果你用了整层透明度光斑看起来就像一块压下去的灰色玻璃而不是光照。5.3 无障碍细节别让屏幕阅读器把标题读两遍我见过不少实现为了节省 DOM直接把文字放在两个span里结果屏幕阅读器会把标题读两遍。用户在阅读页面上时突然听到一句话出现两次体验非常糟糕。我的解决办法是在外层h2上加aria-label写明完整标题两个内部span都加上aria-hiddentrue。这样视觉用户看到的依然是完整的两层渲染效果读屏用户只朗读一次外层标签里的内容。这一行代码不起眼但在无障碍审查时非常加分。5.4 一开始最容易被忽略的现实问题背景色霓虹光晕的本质是发光发光效果在浅色背景上是几乎看不出来的。所以这个效果默认是给深色背景设计的。我在测试时就犯过这个错误把代码放在一个默认白色的页面上怎么调颜色都觉得很淡心里以为是text-shadow失效了。实际上霓虹光晕需要较深的底色来“吸收”光晕才能产生溢出感。如果你非要在浅色页面用建议把基础层文字颜色改成深色光晕颜色调成低饱和再把聚光灯中心的高亮改成深色文字的提亮效果会更接近“霓虹”而不是“反光”。做这个效果给我最大的感觉是CSS 特效不在于特效本身有多炫而在于你有没有把“视觉需求”拆成“可维护的结构”。一个聚光灯标题拆成霓虹底光、聚光灯遮罩、指针跟随三件事之后代码量比想象中少后期改起来也几乎不费脑子。如果你也想把某个标题做得更抓人可以直接把这一段代码拿过去先跑起来再慢慢调颜色和光斑尺寸整个过程不会超过半小时。