霓虹光效需用多层错时box-shadow模拟辉光，禁用border-color动画；强制硬件加速、深色模式适配、伪元素解耦交互，并依人眼暂留调参。
用 CSS @keyframes 实现按钮边框霓虹光效
直接给按钮加 border 配合动画就能出效果，但“霓虹感”核心不在颜色多，而在明暗节奏和模糊扩散——纯色闪动只是眨眼，不是霓虹。关键得用 box-shadow 模拟辉光层叠，再靠多层不同延迟/持续时间的动画制造呼吸感。
- 别只 animating
border-color：它无法产生外发光，视觉单薄，且在部分 Safari 版本中动画卡顿 - 至少叠加 3 层
box-shadow：内层锐利（0 0 5px），中层扩散（0 0 15px），外层虚化（0 0 30px），每层设不同颜色与透明度 - 动画周期必须错开：比如主层
2s，中层2.3s，外层1.8s，避免同步闪烁导致画面“抖”
避免 Chrome/Firefox 渲染闪烁的写法
很多教程直接写 animation: neon 3s infinite，但在高刷新率屏或低性能设备上容易出现边框跳变或光晕撕裂。根本原因是浏览器对 box-shadow 的合成策略不稳定。
- 强制开启硬件加速：给按钮加
transform: translateZ(0)或will-change: box-shadow（后者慎用，仅对频繁重绘元素） - 禁用非必要重绘：移除所有
:hover中修改box-shadow的规则，改用 class 切换预定义动画，否则鼠标悬停瞬间会重置动画计时器 - 颜色值统一用
rgba()：比如rgba(100, 200, 255, 0.7)，比hsl()或命名色更可控，避免不同引擎解析色相偏移
适配深色模式下的霓虹对比度
一套动画在白底上炫酷，放到黑底上可能直接“糊成一团”。霓虹不是越亮越好，而是要维持边缘清晰度与背景的足够反差。
- 深色模式下降低最外层
box-shadow模糊半径：从30px改为20px，防止光晕吞噬按钮轮廓 - 主色饱和度提高 10–15%：比如浅蓝
rgb(135, 206, 250)在深色背景下显灰，换成rgb(100, 180, 255)更“炸” - 用
@media (prefers-color-scheme: dark)单独覆盖动画 keyframes，不要依赖 JS 检测，减少渲染延迟
移动端触摸反馈与动画冲突处理
真机点按按钮时，系统自带的 :active 压缩态会和霓虹动画抢 box-shadow 控制权，导致光效突然收缩或消失。
- 把霓虹动画绑定到伪元素
::after上，按钮本体只负责交互逻辑，两者样式完全解耦 - 在
:active状态里只改transform: scale(0.98)，不碰任何shadow或color - 加
pointer-events: none到动画伪元素，防止它拦截点击事件
真正难的不是让光动起来，是让光动得“像电离气体在玻璃管里游走”——这取决于各层 shadow 的衰减曲线是否匹配人眼暂留特性，调参时盯着看 10 秒，如果觉得刺眼或发虚，就该调透明度和模糊值，而不是加更多颜色。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
