如何通过添加噪声元素来创造令人惊叹的CSS图形效果？

本文共计3884个文字，预计阅读时间需要16分钟。

在当下，我特别喜欢利用CSS去构建一些有创意的图形。我们先来看一个简单的例子。首先，假设我们要实现一个10x10的格子：此时，我们可以利用一些随机效果，来优化这个图案。

在平时，我非常喜欢利用 CSS 去构建一些有意思的图形。

我们首先来看一个简单的例子。首先，假设我们实现一个 10x10 的格子：

此时，我们可以利用一些随机效果，优化这个图案。譬如，我们给它随机添加不同的颜色：

虽然利用了随机，随机填充了每一个格子的颜色，看着有那么点意思，但是这只是一幅杂乱无章的图形，并没有什么艺术感。

这是为什么呢？因为这里的随机属于完全随机，属于一种白噪声。

什么是白噪声？

噪声（Noise）实际上就是一个随机数生成器。

那么，什么是白噪声呢？如果从程序员的角度去理解的话，可以理解为我们在 JavaScript 中使用的 random() 函数，生成的数大致在 0~1 内是完全随机的。

而噪声的基础是随机数，譬如我们给上述的图形每一个格子添加了一个随机颜色，得到的就是一幅杂乱无章的图形块，没有太多美感可言。

白噪声或白杂讯，是一种功率谱密度为常数的随机信号。换句话说，此信号在各个频段上的功率谱密度是一样的，由于白光是由各种频率（颜色）的单色光混合而成，因而此信号的这种具有平坦功率谱的性质被称作是“白色的”，此信号也因此被称作白噪声。

因为，利用白噪声产生的图形，看起不自然，也不太具备美感。

观察现实生活中的自然噪声，它们不会长成上面的样子。