← 返回导航

霓虹光晕

tricks
NEON

关键点

  • 霓虹光晕通过多层 text-shadow 叠加，模拟霓虹灯发光的弥散效果
  • 内层阴影颜色饱和、模糊半径小，模拟灯管本身；外层模糊大、透明度低，模拟光晕扩散
  • 同色多层叠加能让发光更浓郁，通常 2-4 层阴影效果最佳
  • 深色背景下霓虹效果最明显，浅色背景下发光感会减弱
  • 可加入闪烁动画，通过改变阴影不透明度模拟霓虹灯的电流不稳定感

效果说明

霓虹灯发光文字。用多层 text-shadow 叠加：第一层白色紧贴文字做"灯芯"，随后多层粉色/紫色由小到大、由实到虚扩散，模拟光晕。配合关键帧在少数帧瞬间关闭阴影，模拟霓虹灯接触不良的闪烁感。深色背景是关键，光晕在暗色中才显眼。