编程语言中的随机函数非常神奇。你可以利用它们生成变化，让事物看起来自发性且新鲜。过去，CSS 中没有生成随机数的方法。现在，
random() 函数即将到来。你将能够创建随机的动画延迟，在屏幕上随机布局内容，创建随机颜色，或者任何你想要的东西——而无需任何 JavaScript。
基础知识
这个新函数有三个参数，模式为：random(min, max, step)。你指定一个最小值和最大值来定义随机数将被选择的范围。你可以使用任何类型的数字（整数、百分比、长度、角度等），只要所有三个参数匹配即可。步长参数是可选的，但对于确保整数很有用。
例如，random(0, 100, 2) 将选择 0 到 100 之间的偶数，而 random(0turn, 1turn)将是一个转角的一部分——基本上，0 到 360 度之间的任何小数。
让我们通过几个示例来看看如何使用 random()。我们将从使用 HTML 和 CSS 创建一个星场开始。
使用 CSS 和 HTML 创建星场
我们将从为每颗星星创建一个 HTML 元素开始。然后，用任意大小的白色圆形来绘制天空并设置星星的样式。将星星设置为固定定位将使其易于随机放置。
<html>
<body>
<div class="star"></div>
<div class="star"></div>
…
<div class="star"></div>
</body>
</html>
body {
background-color: black;
}
.star {
background-color: white;
border-radius: 50%;
aspect-ratio: 1/1;
width: 3px;
position: fixed;
}
现在，我们将通过将 top 和 left 属性设置为随机值来分布星星，在这种情况下，top 为 0-100%（Y 轴），left 为另一个随机值（X 轴）。默认情况下，每个 random() 函数将使用不同的随机基数生成不同的随机值，该随机基数由均匀分布生成。
.star {
background-color: white;
border-radius: 50%;
aspect-ratio: 1/1;
width: 3px;
position: fixed;
top: random(0%, 100%);
left: random(0%, 100%);
}
为了更动态的效果，也让“星星”的大小随机。
.star {
background-color: white;
border-radius: 50%;
aspect-ratio: 1/1;
width: random(2px, 10px, 1px);
position: fixed;
top: random(0%, 100%);
left: random(0%, 100%);
}
注意，top 和 left 随机值使用了百分比。但对于 width，你可以基于像素选择随机大小。只需记住，无论你使用什么单位，都需要在每个参数中保持一致。上述示例中使用的第三个参数用于确保星星大小以 1px 为增量，以获得更好的数字分布，从而提供更多变化。
我们可以通过添加一些特殊效果，如使用分层阴影和混合效果为星星添加微妙的发光效果，来进一步发挥这个想法。
.star {
--star-size: random(--random-star-size, 1px, 7px, 1px);
background-color: white;
border-radius: 50%;
aspect-ratio: 1/1;
width: var(--star-size);
position: fixed;
top: random(0%, 100%);
left: random(0%, 100%);
filter: drop-shadow(0px0pxcalc(var(--star-size) * 0.5) oklch(0.70.2random(0, 100)))
drop-shadow(0px0pxcalc(var(--star-size) * 2) white);
mix-blend-mode: hard-light;
}
共享随机性和自定义属性
--star-size 自定义属性允许重复使用随机生成的像素大小，但使用自定义属性与 random() 也有一些重要细节。首先，你将看到 random() 函数的第一个参数看起来像另一个自定义属性。这里使用的 --random-star-size 名称被称为标识符。它用于确保在其他 random()函数调用中提供相同的标识符时生成的随机值被使用。
你可能想知道，为什么这在这里是必要的？重要的是要认识到，将自定义属性设置为 CSS 函数与其他编程语言中变量存储结果的方式不同。自定义属性更像是一种简单的文本替换机制。这意味着无论你在哪里使用带有 var() 的自定义属性，实际发生的情况更像是一种文本替换，用你声明的属性的副本替换 var()。在这个示例中，这意味着另一个 random() 调用，而不是函数的结果值。
回到示例，发光的理想模糊效果需要基于星星的随机大小。这可以通过使用 calc() 来使用星星大小的一个因子作为分层阴影的模糊大小来实现。这样做取决于获得相同的随机值，因此使用命名标识符是正确的方法。
第一个阴影也使用 random() 通过 oklch() 选择色相，以添加在柔和白色发光上组合的鲜艳颜色，使用 hard-light 混合模式。这种组合为星星添加了微妙但动态的颜色化。
使用命名标识符在单个元素的属性之间共享随机性。这是共享随机性的许多方法之一。random() 函数有多种方法，具体取决于你的需求。你也可以使用 element-shared 值来在所有匹配元素中共享给定属性的随机值，或者混合使用这两种方法来在所有地方共享值。与命名标识符不同，后者将在每次使用标识符时共享值，element-shared 将在所有应用它的元素中共享给定属性的随机值。
在星场示例中看到这一点工作的一种方法是添加一些带有简单图形的四角星。
.star.fourpointed {
clip-path: shape(from 50% 0%,line to 50.27% 3.25%, …);
--star-size: random(--random-four-point-size, 20px, 60px, 1px);
rotate: random(element-shared, -45deg, 45deg);
}
CSS shape() 用于定义将裁剪圆形白色背景的四角图形。星星大小仍然可以是随机的，但需要放大一个数量级才能感觉合适。这些星星更真实的样式来自于找到一种方法来模仿在星星图像中看到的衍射光线。它们以相同的角度倾斜，这在许多重要的物理学原因上很重要。因此，虽然可以分配一个静态的角度，但更有趣和动态的是随机分配一个。但要有效地做到这一点，意味着要找到一种方法来为所有四角星使用相同的随机角度。
这就是 element-shared 发挥作用的地方。element-shared 值为所有元素生成一个随机值，用于该属性。这使得所有四角星都以相同的随机角度旋转。
以下是你可以尝试的星场示例的完整版本：https://codepen.io/jdatapple/pen/YPyELeV?editors=1100
随机放置的矩形
还有许多其他方法可以利用 random()。基于星场示例的一些概念，你可以探索使用 random() 与布局工具（如 grid）。
在这个变体示例中，网页区域被平均分为 100 行和 100 列。然后，随机颜色的矩形在网格中随机定位：
.grid {
display: grid;
--rows: 100;
--columns: 100;
grid-template-rows: repeat(var(--rows), 1fr);
grid-template-columns: repeat(var(--columns), 1fr);
width: 100vw;
height: 100vh;
}
.rectangle {
background-color: lch(100%90%random(0deg, 360deg));
grid-area: random(1, var(--rows), 1) / random(1, var(--columns), 1);
}
你可以在任何支持 random() 的浏览器中查看最终结果：https://codepen.io/ntim/pen/dPYGJxj
照片堆叠
另一个利用 random() 的示例是创建随机放置和定向的照片堆叠，看起来像它们被扔在彼此上面。你可以花很多时间设置所有照片，或者让计算机每次页面加载时程序生成它。
.stack img {
width: 100%;
grid-column: 1;
grid-row: 1;
border: 10px solid hsl(0, 100%, 100%);
box-shadow: 10px10px40pxhsl(0, 0%, 0%, 20%);
--random-rotate: rotate(random(-1 * var(--rotate-offset), var(--rotate-offset)));
transition: .3s ease-out;
transform: var(--random-rotate);
transform-origin: random(0%, 100%) random(0%, 100%);
}
不仅如此，将随机性包含在交互性中也很简单。为图像的悬停状态添加随机平移增加了趣味性：
.stack:hover img {
transform: var(--random-rotate) translateX(random(-1 * var(--translate-offset), var(--translate-offset))) translateY(random(-1 * var(--translate-offset), var(--translate-offset)));
}
幸运转盘
random() 函数甚至可以用来创建需要不可预测结果的交互元素。幸运转盘示例完美地展示了这一点。
当点击“SPIN”按钮时，@keyframe 动画使用 random() 生成一个旋转值，该值设置转盘何时以及在哪里停止。这个示例突显了现代 CSS 中不断增长的可用功能，在样式表中定义了所有交互性、随机性和动画。
你可以在这里看到演示：https://codepen.io/ntim/pen/WbQrMow
一个方便的随机性参考
根据你的需求，有各种各样的方法可以使用 random()，也有不同的方法可以在元素之间共享随机性。
最大随机性
两个属性获得不同的值，而且每个元素也不同，所以你会得到很多随机矩形。
.random-rect {
width: random(100px, 200px);
height: random(100px, 200px);
}
在元素内按名称共享
使用标识符，两个属性获得相同的值，但每个元素仍然不同，所以你会得到很多随机正方形。
.random-square {
width: random(--foo, 100px, 200px);
height: random(--foo, 100px, 200px);
}
在属性内共享元素
使用 element-shared，两个属性获得不同的值，但它们被所有元素共享，所以你会得到很多相同大小的单个随机大小的矩形。
.shared-random-rect {
width: random(element-shared, 100px, 200px);
height: random(element-shared, 100px, 200px);
}
全局按名称共享
使用命名标识符和 element-shared 意味着两个属性获得相同的值，每个元素都共享随机值，所以你会得到很多相同大小的单个随机大小的正方形。
.shared-random-squares {
width: random(--foo element-shared, 100px, 200px);
height: random(--foo element-shared, 100px, 200px);
}
试试并告诉我们结果如何
你可以在 Safari Technology Preview 中今天尝试 random() 函数！然而，重要的是要指出，CSS 工作组正在讨论规范，有几个开放的问题关于这种方法是否最好地满足开发者的需求。
虽然上述示例展示了令人兴奋的可能性，但我们正在积极征求网络开发社区的意见，以帮助塑造最终方向，你可以帮忙。如果你在 Safari Technology Preview 中尝试了 random()，我们将非常乐意听到你的体验。哪些方面做得很好？哪些方面感觉不自然？共享值的表达方式是否有意义？是否有缺失的使用案例？或者对 element-shared 的名称有更好的建议？你的反馈将直接影响此功能从当前形式向前发展的方式。这是一个让你帮助塑造 CSS 的机会——试试看，并告诉我们你的想法。
你可以在 Bluesky / Mastodon 上与我 Jon Davis 分享你的反馈，或者我们的其他布道者——Jen Simmons，在 Bluesky / Front-End Social 上，或者 Saron Yitbarek，在 BlueSky上。你也可以关注 WebKit LinkedIn。如果你发现错误或问题，请提交 WebKit 错误报告。
原文地址：https://webkit.org/blog/17285/rolling-the-dice-with-css-random/
作者：Jon Davis, Jen Simmons, and Tim Nguyen
如果您觉得内容对您有帮助，欢迎在看、点赞、分享 ⬇️❤️⬇️
点击下方卡片，关注【前端小石匠】，一起学习，共同进步～
如果您关注前端相关领域，可以扫码添加小编微信进群交流学习～🔥近期热文
优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！
优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、微信小程序定制开发、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）等一系列互联网应用服务。
公安局备案号：
专属顾问
