Page 76 - css揭秘

图 2-55
我们最终的条纹图案使用了质数，
从而增加了随机的真实感

根据这个逻辑，要让这种随机性更加真实，我们得把贴片的尺寸最大
化。感谢数学，我们不需要苦苦思索如何做到这一点，因为我们已经知道答
1①
案了。为了让最小公倍数最大化，这些数字最好是“相对质数” 。在这种情
况下，它们的最小公倍数就是它们的乘积。举例来说，3、4 和 5 是相对质
数，因此它们的最小公倍数就是 3×4×5=60。要达成相对质数，最简单的办
法就是尽量选择质数，因为质数跟其他任意数字都是相对质数。在网上可以
找到质数的清单，它们有的非常大。
为了进一步增加随机性，我们甚至可以用质数来指定各组条纹的宽度。
于是我们的代码变为：

background: hsl(20, 40%, 90%);
background-image:
linear-gradient(90deg, #fb3 11px, transparent 0),
linear-gradient(90deg, #ab4 23px, transparent 0),
linear-gradient(90deg, #655 41px, transparent 0);
background-size: 41px 100%, 61px 100%, 83px 100%;

是的，我们的代码算不上完美，但想要在图 2-55 中找到任何平铺接缝
可不容易。平铺贴片的尺寸现在是 41×61×83=207 583 像素，比任何我们所
能想像出的屏幕分辨率都要大！

这个技巧被 Alex Walker 定名为“蝉原则”，他最先提出了通过质数来
增加随机真实性的想法。请注意这个方法不仅适用于背景，还可以用于其他
涉及有规律重复的情况。
„ 在照片图库中，为每幅图片应用细微的伪随机旋转效果时，可以使
用多个 :nth-child(a) 选择符，且让 a 是质数。

„ 如果要生成一个动画，而且想让它看起来不是按照明显的规律在
循环时，我们可以应用多个时长为质数的动画。（可以在 play.
csssecrets.io/cicanimation 看到一个示例。）

试一试 play.csssecrets.io/cicada-stripes

① 质数是一些整数，除了 1 和自身之外，它们无法被其他任何数字整除。举例来说，最小的
10 个质数分别是 2、3、5、7、11、13、17、19、23 和 29。另一方面，相对质数是一种数字
之间的关系，而不是单个数字自身的属性。构成相对质数的这些数字没有公约数，但它们自
己是可以有多个约数的（比如说，10 和 27 是相对质数，但它们都不是质数）。很显然，一
个质数跟其他所有数字都可以构成相对质数。

7 伪随机背景 45

඀ࠡ JOEC