叙述：使用css现静态噪音效果

您还记得没有信号的旧电视上的静电噪音吗或者当信号不好，画面失真时如果电视信号的概念早于您，这里有一张GIF可以准确地表达我的意思。程序网站的最新消息可以到我们平台网站了解一下，也可以咨询客服人员进行详细的解答！

我将在这里做的是一种CSS验，以探索一些利用渐变错误的技巧。您可以在业余项目中使用它来获得乐趣，但使用SVG更简洁，更适合际项目。此外，效果在不同浏览器中表现不同，因此如果您要查看这些内容，比较好在C、E或F中查看它们。


如您所见，第二个圆圈比首个圆圈渲染得更好，因为%渐变中的两种颜色之间存在微小差异()，而不是像首个圆圈那样使用整数值的直接硬色标。


再看一下，这次使用-结果更明显的地方：

在制作这些演示时，一个有趣的想法让我印象深刻。与其一直修复失真，不如尝试反其道而行之我不知道会发生什么，但这是一个有趣的惊喜！我采用了圆锥渐变值并开始降低它们，使糟糕的抗锯齿效果看起来更糟。


你看到比较后一个有多糟糕吗这是一种在中间炒，没有什么是顺利的。让我们用较小的值让它全屏显示：








我想你知道这是怎么回事。当我们对渐变中的硬色停止使用非常小的十进制值时，我们会得到一种奇怪的扭曲视觉效果。我们的噪音诞生了！


我们离我们想要的颗粒状噪声还很远，因为我们仍然可以看到际的锥形梯度。但是我们可以将这些值减小到非常非常小的值比如000%突然之间就没有梯度了，只有纯粹的颗粒感：


我们有一个噪音效果，它只需要一个CSS渐变。


我们可以通过在调整其位置的同时使梯度的大小非常大来增加随机性：


渐变应用于固定00正方形并放置在60%60%坐标处。在这种情况下我们很难注意到它的中心。径向渐变也可以这样做：


为了让事情变得更加随机（并且更接近真的噪声效果），我们可以结合两个梯度并使用--来平滑事情：


我们的噪音效果是完美的！即使我们仔细观察每个示例，也没有任何梯度的痕迹，而是美丽的颗粒状静态噪声。我们刚刚将那个抗锯齿错误变成了一个巧妙的功能！