给你的作品添加一些怀旧的电视噪音特效

前端

2023-11-02 22:21:25

踏入电视噪音的时光隧道

记忆犹新的是，我们凝视着电视屏幕，看着闪烁的像素方块，这让我们仿佛回到了过去。这种怀旧的电视噪音效果为我们的设计增添了一份独特的魅力，让我们重温那段经典的时光。

揭秘电视噪音效果的魔法

使用CSS滤镜和SVG动画，我们可以重现电视噪音的特征。CSS滤镜将像素化效果添加到图像，而SVG动画则模拟闪烁效果。通过巧妙地结合这两个元素，我们能够创造出令人惊叹的电视噪音效果。

开始动手：打造属于你的电视噪音效果

第一步：添加图像

选择一张你想要添加电视噪音效果的图像。为了获得最佳效果，建议使用高分辨率图像。

第二步：应用CSS滤镜

使用CSS滤镜 pixelate() 将图像像素化。滤镜的参数控制像素的大小，值越大，像素越大。

img {
  filter: pixelate(2px);
}

第三步：创建SVG动画

创建两个SVG圆，一个黑色，一个白色。黑色的圆将充当噪点，白色的圆将模拟闪烁效果。

<svg id="noise" width="100%" height="100%">
  <circle cx="50%" cy="50%" r="50%" fill="black" />
  <circle cx="50%" cy="50%" r="50%" fill="white" />
</svg>

第四步：动画SVG

使用CSS动画为白色圆添加闪烁效果。动画会让圆的透明度在一定时间内不断变化，从而产生闪烁效果。

@keyframes flicker {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

#noise circle:nth-child(2) {
  animation: flicker 1s infinite;
}

第五步：叠加SVG和图像

将SVG元素叠加到图像上，使用 mix-blend-mode 属性将其与图像混合。混合模式 multiply 将黑色圆与图像相乘，产生电视噪音效果。

.container {
  position: relative;
}

img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#noise {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: multiply;
}