CSS中的随机性
CSS中的随机性
吨 大多数语言都有一些生成随机数的机制。不幸的是，在 CSS 中并非如此。对于大多数网站来说，这可能不是问题，但是在处理更具生成性的方法（CSS 非常适合）时，我们必须求助于 JavaScript 来生成随机值。在他的文章中，我将探索一种仅使用 CSS 生成它的好方法。
我将介绍以下主题：
- 在 CSS 中生成随机数
- 使用随机值生成数字和颜色范围
- 产生如本文封面所示的效果
随机数生成器函数
要在 CSS 中生成随机值，我们首先需要了解计算机中的随机性是如何工作的。计算机不能自己想出一个随机数——它们被设计为以一种非常严格的方式工作——对于给定的输入，它们会返回一组输出。他们所能做的就是生成伪随机数——看起来像是随机的数字序列，但背后仍有一些基本规则。
它的一个例子可能是以下函数：
f(x) = (A*x + c) mod 1;
一个 和 C 参数可以根据我们的喜好进行调整。 模式 1 是一种表示法，表示我们要对数字进行非整数提醒，例如 5.3 模 1 = 0.3 .
该函数将始终为我们提供范围内的结果 0-1 这很方便，因为我们以后可以随意缩放它，而无需更改函数本身 - 在生成颜色时，我们将在生成以像素为单位的大小时使用不同的范围。
让我们设置 A=8.385，c=2.534 那么我们将得到以下伪随机序列：
fn(0) = 0.5339999999999998
fn(1) = 0.9190000000000005
fn(2) = 0.3039999999999985
fn(3) = 0.6890000000000001
fn(4) = 0.07399999999999807
fn(5) = 0.4589999999999961
fn(6) = 0.8440000000000012
fn(7) = 0.2289999999999992
fn(8) = 0.6140000000000043
fn(9) = 0.9990000000000094
fn(10) = 0.38400000000000034
如果您不知道底层序列，则该函数生成的数字可能看起来是随机的。
在这种情况下，给定足够的值，很容易对函数进行逆向工程，但现实生活中的随机函数通常要复杂得多。您可以使用高阶多项式、三角函数以及您想象的任何其他内容…… 除非您使用纯 CSS 工作。
在 CSS 中，我们没有大量的数学函数可供操作，但我们仍然可以使用一些基本的操作，如求和和乘法，并使用 @财产 我们可以表演地板，但仅此而已。幸运的是，这足以获得令人满意的结果。
我们的 CSS 随机生成器
在我们的 CSS 随机数生成器中，我们将使用相同的技术，但为了降低函数的可预测性，我们将使用二次多项式——这意味着我们将包含一个额外的组件 B*x^2 .
此外，我们的示例将使用序列号来生成我们的随机数。 CSS 本身并没有为我们提供一种机制来轻松获取每个元素的序号，但是使用我上一篇文章中的技术，我们可以生成它。该号码将存储为 --n CSS 变量。欲了解更多信息，请查看我之前的文章。
[
CSS 中的计数：解锁 CSS 变量的魔力
让我们探索在 CSS 中计数元素以实现有趣效果的可能性——使用二进制和素数……
媒体网
](/hypersphere-codes/counting-in-css-unlock-magic-of-css-variables-8e610881097a)
这是我们的随机数生成器的解决方案：
上面的 CodePen 绘制了前 100 个值的函数结果。
代码使用 素数计数器 从我之前的文章中枚举所有的div（设置为 --n 多变的）。然后使用这个变量来计算 x0 - 这是我们的随机生成函数。但是这些值可能会变得非常大，因此我们需要限制它们。为了只得到它的非整数部分，我们可以使用描述的技术 这篇令人难以置信的 CSS 技巧文章 - 通过定义 @财产 类型的 <integer> 我们可以用它来计算数字——这意味着 5.35 会变成 5 .通过从原始数字中减去它，我们最终可以得到我们的结果 模式 1 .
现在我们可以使用它来设置我们的样式的一些参数。
兼容性
解决方案依赖于 @财产 去表演 地面 手术。在撰写本文时，它目前在 Firefox 和 Safari 中不可用。
[
"@属性" |我可以使用... HTML5、CSS3 等的支持表
“我可以使用”提供最新的浏览器支持表，以支持桌面和移动端的前端 Web 技术……
caniuse.com
](https://caniuse.com/?search=%40property)
使用随机值进行样式设置
我们生成的所有随机值都来自 0到1 .这允许我们将它们缩放到所需的范围和单位：
转换为长度（宽度、高度等）。
要将值转换为长度，我们需要执行以下操作：
宽度：计算（50px + var（--r）* 100px）；
这会将我们的随机值转换为 50px-150px 范围。通常，您可以使用以下等式从 0-1 范围到您想要的 抗体 范围：
计算(a + var(--r) * (ba));
转换为颜色
要将我们的随机值转换为颜色，我们需要决定我们想要使用什么颜色表示。 CSS 支持多种表示形式，包括：
- RGB：红绿蓝分量
- HSL：色调、饱和度和亮度分量
还有其他有用的技术，例如使用[ 颜色（）](https://caniuse.com/css-color-function) 功能 或者 LCH / LAB色彩空间 但在撰写本文时，它们并未在浏览器中广泛采用。
选择要使用的颜色表示后，您可以使用它来相应地改变值：
背景颜色：rgb(calc(127 + var(--r) * 127, 0, 0);
Spectrum for RGB(x, 0, 0), x from 0 to 255.
上面的代码会将我们的随机值转换为从红色的一半强度到红色的全部强度的颜色。
我们还可以使用 HSL 颜色空间来改变颜色的饱和度（或亮度）：
背景色：hsl(170, calc(var(--r) * 100%), 50%);
Spectrum for HSL(170, x, 50%). x from 0% to 100%.
您还可以使用 HSL 空间来改变范围内的颜色。要让您的随机颜色从浅绿色变为深蓝色，您可以使用以下公式：
hsl(计算(80 + var(--r) * 170), 80%, 50%);
Spectrum for HSL(x, 80%, 50%), x from 80 to 250.
示例：生成式天际线
我们可以使用上面的技术来生成下面的天际线。此示例中的 JavaScript 仅用于在移动鼠标时提供新种子。所有计算都在 CSS 中完成。
示例：形状网格
下面的示例展示了如何应用此技术来同时改变多种元素样式。边界半径和颜色的 4 条边中的每条边都是根据随机值确定的。颜色是从范围生成的 hsl(x, 50%, 50%) 为了 x 从 150 变化到 240 .
为了生成边界半径，我们使用相同的单个随机数，但对于每个边缘，我们按不同的因子对其进行缩放并将其限制在 0 和 1 之间。因为这些变量中的每一个都被配置为整数（使用 @财产 )，我们最终得到 0 或 1。然后将该值乘以 50%，使边框为 0% 或 50%。
示例：孟菲斯风格艺术生成器
最后一个例子是 孟菲斯集团设计风格 模式生成器。这种风格在 80 年代很流行，在过去的几年里，它正在艺术和流行文化中卷土重来。所有随机生成都是在 CSS 中完成的，JavaScript 仅用于提供更改种子或动画种子更改的能力。
您是否看到任何纯 CSS 随机性可能对您有用的用例？也许您知道实现这些效果的其他解决方案？在评论中告诉我！
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
