多年来，只要想在界面里加点“随机感”，CSS 与 JS 就会搅成一团：样式和脚本互相牵扯、逻辑分散、维护艰难。 而现在，WebKit 团队带来的全新 random()直接把随机数搬进了 CSS——不写 JS，也不再有“意大利面条”式的代码链条。 因此，样式层就能独立完成很多“小心机”；与此同时，脚本层负担显著减轻；尽管如此，上线前仍应评估兼容性。
让我们正式开聊。
random() 是什么？
CSS 现已引入函数 random() ： 在样式表中直接生成随机数。语法简洁却威力不小。
- 语法：
random(min, max, step?) - 参数：
min、max必填；step可选（步进） - 单位需一致：
px、%、em、rem、turn等 - 返回值：在区间
[min, max]均匀分布（uniform）的随机数
示例：
.element {
width: random(50px, 200px); /* 50px 到 200px 的随机宽度 */
transform: rotate(random(0turn, 1turn)); /* 0° 到 360° 的随机旋转 */
}
带步进： random(0, 10, 2) → 可能得到 0/2/4/6/8/10。单位一致： 任意一种，但不能混用。 因此，声明简短；与此同时，表达力却非常足；尽管如此，仍需注意各浏览器实现差异。
前端AI·探索：涵盖AI视野，CSS动效、React Hooks、Vue 技巧、LLM 应用、Python 脚本等专栏，案例驱动实战学习，点我了解。
7 个真实场景的 random() 用法
1) 星空点缀（位置与尺寸）
每次刷新都换位置与大小，背景立刻“活”起来。
.star {
top: random(0%, 100%);
left: random(0%, 100%);
width: random(2px, 6px);
}
因此，低成本即可获得“自然分布”的装饰；与此同时，无需额外 JS；尽管如此，注意密度与可读性。
2) 按钮悬停的轻微延迟差
略有时间差会更“像人”，避免机械同步。
button:hover {
transition-delay: random(0s, 0.5s);
}
因此，微妙的不一致让交互更柔和；然而，别过头，避免让人误以为延迟卡顿；与此同时，关键按钮需兼顾可用性。
3) 彩纸/粒子撒落 🎉
用随机位移与角度做“可控的混乱”。
.confetti {
transform: translate(random(-50px, 50px), random(-100px, 0));
}
因此，动效更灵动；与此同时，性能成本可控；尽管如此，移动端请限制数量。
4) 卡片“手作感”排版
细微旋转与间距变化，让网格不再千篇一律。 （提示：可配合 rotate()、margin/gap 的随机化。）
5) 颜色细调 🎨
随机色相/饱和度/明度，做系列内的细微差异。
.element {
background-color: hsl(random(0, 360), 70%, 50%);
}
因此，视觉更有层次；与此同时，品牌主色仍要锁定；尽管如此，WCAG 对比度需达标。
6) 颗粒/泼墨质感
通过随机缩放与位移，让纹理更有机，而且纯 CSS 即可完成。
7) 动画间隔去同质化
给重复动画不同的持续时间，降低“重复感” 。
.element {
animation-duration: random(2s, 5s);
}
因此，列表/占位骨架等更自然；与此同时，关键动效时长应设上限；尽管如此，系统动效节律仍要统一。
浏览器支持
- 已支持：基于 WebKit 的浏览器（Safari、iOS Safari）。
- 尚未完全支持：Chrome、Firefox 等。
- 注意：语法与实现可能继续调整，务必测试后再上生产。 因此，推荐在渐进增强策略下启用；与此同时，提供确定性的兜底样式；尽管如此，实验阶段不建议承担核心功能。
TL;DR
random()让 数字/角度/尺寸 等随机化直接在 CSS 里完成；- 适配
px/%/em/rem/turn等同单位用法； - 动画、布局、配色与特效都能受益；
- 减少 JS 介入，样式自洽；
- 兼容性仍有限，需谨慎发布。
一点主观看法
过去这些“随机小心思”几乎都靠 JS 拼出来，样式与脚本分离被打破、还常伴随小 hack 与额外文件。 有了 random()，代码更少、表达更直接、创作更随性。 因此，只要兼容性到位，就会大面积采用；与此同时，也会对设计系统与动效规范提出更高要求；尽管如此，用户体验与性能依然是第一准则。
