如何在CSS中实现霓虹灯闪烁效果_利用Sass随机函数生成颜色-css教程-PHP中文网

霓虹灯闪烁效果纯css实现，核心是animation配合多层text-shadow模拟光晕扩散，并同步控制opacity与blur变化；sass的random()仅编译时执行，适合预生成固定霓虹色值而非运行时随机。

如何在css中实现霓虹灯闪烁效果_利用sass随机函数生成颜色

霓虹灯闪烁效果的核心是 animation + text-shadow 多层叠加

纯 CSS 实现霓虹感，不依赖 JS 或图片，关键在于用 text-shadow 模拟光晕扩散，并通过 @keyframes 控制透明度与模糊半径的周期性变化。Sass 的 random() 函数只在编译时执行一次，无法实现“每次刷新随机色”，所以它适合生成固定但多样化的配色方案，而非运行时动态变色。

用 Sass `random()` 预生成一组霓虹色值（非运行时）

Sass 的 random(255) 返回 1–255 整数，需手动转成十六进制或 RGB；直接拼接字符串易出错，推荐用 rgba() 配合透明度控制辉光强度：

$neon-colors: (
  "cyan": rgba(0, 255, 255, 0.8),
  "pink": rgba(255, 0, 160, 0.75),
  "violet": rgba(180, 0, 255, 0.7)
);

// 或用 random() 动态生成（编译时确定）
$base-r: random(50) + 200;
$base-g: random(50);
$base-b: random(50) + 200;
$neon-hue: rgba($base-r, $base-g, $base-b, 0.85);

⚠️ random() 在编译阶段求值，每个文件只运行一次，不能用于 :hover 或动画帧内
生成的颜色建议保留一定饱和度和明度，避免太灰或太暗导致辉光不可见
透明度设为 0.7–0.9，过高会糊成一团，过低则无辉光感

闪烁动画必须包含 opacity 和 blur 双变量变化

单纯改 color 或只动 text-shadow 模糊值，效果单薄。真实霓虹灯有亮度波动和边缘弥散变化，所以关键帧要同时控制：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

@keyframes neon-flicker {
  0%, 100% {
    opacity: 0.95;
    text-shadow:
      0 0 5px $color,
      0 0 10px $color,
      0 0 15px lighten($color, 20%),
      0 0 20px lighten($color, 20%),
      0 0 30px darken($color, 10%),
      0 0 40px darken($color, 10%);
  }
  50% {
    opacity: 0.7;
    text-shadow:
      0 0 3px $color,
      0 0 6px $color,
      0 0 9px lighten($color, 10%),
      0 0 12px lighten($color, 10%);
  }
}