如何使用纯CSS渐变优化动画电视无信号静态噪点效果

现有方案可优化点 #

你当前的两个径向渐变、锥形渐变实现已经符合纯CSS渐变的要求，还有几个可以更贴近真实电视噪点的调整方向：

• 单一层渐变颗粒规则感太强，和真实噪点的随机多粒度特征不符
• 仅靠background-size缩放的动画节奏偏缓，缺少真实噪点的快速跳变感
• 黑白硬切对比度太高，缺少老电视噪点自带的灰阶过渡和扫描线特征

优化实现方案 #

全部基于CSS渐变实现，没有使用JS、SVG、外部图片，符合要求：

1. 叠加3-4层不同参数的径向渐变/锥形渐变，每层设置不同的颗粒密度、偏移位置，模拟不同尺寸的噪点颗粒
2. 动画同时修改background-position和background-size，加入无规则的位置偏移，模拟噪点的随机跳动效果
3. 渐变断点加入灰色过渡，降低纯黑白对比度，同时叠加一层低透明度的重复线性渐变模拟扫描线

优化后代码 #

html,body {
  width: 100%;
  height: 100%;
  display: flex;
  margin: 0;
  background: #000;
}
.tv-static {
  width: 500px;
  height: 300px;
  margin: auto;
  /* 多层渐变叠加：3层噪点+1层扫描线 */
  background-image: 
    /* 第一层细颗粒噪点 */
    repeating-radial-gradient(circle at 23% 41%, rgba(255,255,255,0.8), rgba(30,30,30,0.9), rgba(0,0,0,0.9) 0.0007px),
    /* 第二层中等颗粒噪点 */
    repeating-radial-gradient(circle at 67% 18%, rgba(255,255,255,0.6), rgba(80,80,80,0.7), rgba(0,0,0,0.8) 0.0012px),
    /* 第三层粗颗粒噪点 */
    repeating-conic-gradient(rgba(255,255,255,0.5), rgba(120,120,120,0.5), rgba(0,0,0,0.7) 0.0009%),
    /* 扫描线效果 */
    repeating-linear-gradient(transparent, rgba(0,0,0,0.15) 1.5px, transparent 3px);
  animation: staticMove 0.8s linear infinite;
}
@keyframes staticMove {
  0% {
    background-size: 100% 100%, 120% 120%, 110% 110%, 100% 100%;
    background-position: 0 0, 10px 20px, -15px -10px, 0 0;
  }
  25% {
    background-size: 120% 110%, 100% 120%, 120% 100%, 100% 100%;
    background-position: -10px 15px, 0 25px, 10px -15px, 0 0;
  }
  50% {
    background-size: 110% 120%, 110% 100%, 100% 120%, 100% 100%;
    background-position: 15px -10px, -20px 0, -10px 20px, 0 0;
  }
  75% {
    background-size: 100% 120%, 120% 110%, 110% 100%, 100% 100%;
    background-position: -20px 0, 15px -10px, 20px 10px, 0 0;
  }
  100% {
    background-size: 120% 100%, 100% 110%, 120% 120%, 100% 100%;
    background-position: 0 20px, -15px 10px, 0 -15px, 0 0;
  }
}

<div class="tv-static"></div>

优化效果说明 #

• 多层渐变叠加完全消除了规则感，颗粒大小错落更贴近真实噪点
• 0.8s快速动画配合位置+尺寸同时变化，噪点跳变感和老电视无信号效果一致
• 灰度过渡+扫描线加持，复古质感更强，没有生硬的黑白割裂感

内容的提问来源于stack exchange，提问作者user17382064