多年來(lái)，只要想在界面里加點(diǎn)“隨機(jī)感”，CSS 與 JS 就會(huì)攪成一團(tuán)：樣式和腳本互相牽扯、邏輯分散、維護(hù)艱難。 而現(xiàn)在，WebKit 團(tuán)隊(duì)帶來(lái)的全新 random()直接把隨機(jī)數(shù)搬進(jìn)了 CSS——不寫 JS，也不再有“意大利面條”式的代碼鏈條。 因此，樣式層就能獨(dú)立完成很多“小心機(jī)”；與此同時(shí)，腳本層負(fù)擔(dān)顯著減輕；盡管如此，上線前仍應(yīng)評(píng)估兼容性。

讓我們正式開聊。

random() 是什么？

CSS 現(xiàn)已引入函數(shù) random()：在樣式表中直接生成隨機(jī)數(shù)。語(yǔ)法簡(jiǎn)潔卻威力不小。

• 語(yǔ)法：random(min, max, step?)
• 參數(shù)：min、max 必填；step 可選（步進(jìn)）
• 單位需一致：px、%、em、rem、turn 等
• 返回值：在區(qū)間 [min, max]均勻分布（uniform）的隨機(jī)數(shù)

示例：

.element {
  width: random(50px, 200px);           /* 50px 到 200px 的隨機(jī)寬度 */
  transform: rotate(random(0turn, 1turn)); /* 0° 到 360° 的隨機(jī)旋轉(zhuǎn) */
}

帶步進(jìn)：random(0, 10, 2) → 可能得到 0/2/4/6/8/10。單位一致： 任意一種，但不能混用。 因此，聲明簡(jiǎn)短；與此同時(shí)，表達(dá)力卻非常足；盡管如此，仍需注意各瀏覽器實(shí)現(xiàn)差異。

7 個(gè)真實(shí)場(chǎng)景的 random() 用法

1) 星空點(diǎn)綴（位置與尺寸）

每次刷新都換位置與大小，背景立刻“活”起來(lái)。

.star {
  top:  random(0%, 100%);
  left: random(0%, 100%);
  width: random(2px, 6px);
}

因此，低成本即可獲得“自然分布”的裝飾；與此同時(shí)，無(wú)需額外 JS；盡管如此，注意密度與可讀性。

2) 按鈕懸停的輕微延遲差

略有時(shí)間差會(huì)更“像人”，避免機(jī)械同步。

button:hover {
  transition-delay: random(0s, 0.5s);
}

因此，微妙的不一致讓交互更柔和；然而，別過(guò)頭，避免讓人誤以為延遲卡頓；與此同時(shí)，關(guān)鍵按鈕需兼顧可用性。

3) 彩紙/粒子撒落 ??

用隨機(jī)位移與角度做“可控的混亂”。

.confetti {
  transform: translate(random(-50px, 50px), random(-100px, 0));
}

因此，動(dòng)效更靈動(dòng)；與此同時(shí)，性能成本可控；盡管如此，移動(dòng)端請(qǐng)限制數(shù)量。

4) 卡片“手作感”排版

細(xì)微旋轉(zhuǎn)與間距變化，讓網(wǎng)格不再千篇一律。 （提示：可配合 rotate()、margin/gap 的隨機(jī)化。）

5) 顏色細(xì)調(diào) ??

隨機(jī)色相/飽和度/明度，做系列內(nèi)的細(xì)微差異。

.element {
  background-color: hsl(random(0, 360), 70%, 50%);
}

因此，視覺更有層次；與此同時(shí)，品牌主色仍要鎖定；盡管如此，WCAG 對(duì)比度需達(dá)標(biāo)。

6) 顆粒/潑墨質(zhì)感

通過(guò)隨機(jī)縮放與位移，讓紋理更有機(jī)，而且純 CSS 即可完成。

7) 動(dòng)畫間隔去同質(zhì)化

給重復(fù)動(dòng)畫不同的持續(xù)時(shí)間，降低“重復(fù)感”。

.element {
  animation-duration: random(2s, 5s);
}

因此，列表/占位骨架等更自然；與此同時(shí)，關(guān)鍵動(dòng)效時(shí)長(zhǎng)應(yīng)設(shè)上限；盡管如此，系統(tǒng)動(dòng)效節(jié)律仍要統(tǒng)一。

瀏覽器支持

• 已支持：基于 WebKit 的瀏覽器（Safari、iOS Safari）。
• 尚未完全支持：Chrome、Firefox 等。
• 注意：語(yǔ)法與實(shí)現(xiàn)可能繼續(xù)調(diào)整，務(wù)必測(cè)試后再上生產(chǎn)。 因此，推薦在漸進(jìn)增強(qiáng)策略下啟用；與此同時(shí)，提供確定性的兜底樣式；盡管如此，實(shí)驗(yàn)階段不建議承擔(dān)核心功能。

TL;DR

• random() 讓 數(shù)字/角度/尺寸 等隨機(jī)化直接在 CSS 里完成；
• 適配 px/%/em/rem/turn 等同單位用法；
• 動(dòng)畫、布局、配色與特效都能受益；
• 減少 JS 介入，樣式自洽；
• 兼容性仍有限，需謹(jǐn)慎發(fā)布。

一點(diǎn)主觀看法

過(guò)去這些“隨機(jī)小心思”幾乎都靠 JS 拼出來(lái)，樣式與腳本分離被打破、還常伴隨小 hack 與額外文件。 有了 random()，代碼更少、表達(dá)更直接、創(chuàng)作更隨性。 因此，只要兼容性到位，就會(huì)大面積采用；與此同時(shí)，也會(huì)對(duì)設(shè)計(jì)系統(tǒng)與動(dòng)效規(guī)范提出更高要求；盡管如此，用戶體驗(yàn)與性能依然是第一準(zhǔn)則。