那天晚上鼓搗 CSS，我學(xué)到一招新東西。說真的，CSS 正在變得有點(diǎn)不可預(yù)測——而且是好的那種。

做過“隨機(jī)性”視覺效果的都懂：隨機(jī)顏色、隨機(jī)延遲、隨機(jī)位置……過去我們習(xí)慣拉上 JavaScript，寫點(diǎn) Math.random() 或者給 CSS 變量塞值。

但現(xiàn)在，CSS 在嘗試內(nèi)建隨機(jī)函數(shù)，對視覺設(shè)計(jì)的“玩法”是一次換代。

無需 JS、無需數(shù)學(xué)庫、無需內(nèi)聯(lián)樣式——隨機(jī)，直接寫在樣式表里。

核心思路：random() 函數(shù)上場

random() 是一個(gè)實(shí)驗(yàn)性的 CSS 函數(shù)，用來在 CSS 中直接生成一個(gè)給定范圍內(nèi)的偽隨機(jī)值；它能給動效、布局與視覺細(xì)節(jié)注入“活力”。

.grid-item {
  position: relative;
  top: random(5rem, 20rem);
  right: random(5rem, 15rem);
}

在一些實(shí)現(xiàn)里，每次樣式重計(jì)算/繪制時(shí)，random() 都可能給出新的值，界面因此鮮活又不刻意。

它為何不同于以往的 JS Hack？

我們常通過 JS 生成內(nèi)聯(lián)樣式或?qū)懭胱远x屬性來“把隨機(jī)塞進(jìn) CSS”。

缺點(diǎn)是：樣式與邏輯耦合、體積上漲、時(shí)機(jī)控制難。

random() 把“隨機(jī)”還給 CSS：由瀏覽器調(diào)度、在樣式層面自然生效。結(jié)果就是——更輕的實(shí)現(xiàn)與更靈動的效果：不是腳本在“操控 UI”，而是樣式在“自發(fā)呼吸”。

隨手 3 個(gè)實(shí)用場景

1) 俏皮的懸停動效（Hover）

讓按鈕每次懸停都稍微不同角度地傾斜：

button {
  transition: transform 0.2s ease;
}

button:hover {
  /* 在 -5deg 到 5deg 之間取隨機(jī)角度 */
  transform: rotate(random(-5deg, 5deg));
}

這種輕微、可感知的隨機(jī)性，像現(xiàn)實(shí)世界里的“觸碰反饋”，細(xì)膩又不夸張。

2) 有“呼吸感”的卡片柵格

想讓網(wǎng)格不那么“死板”？給位置加一點(diǎn)隨機(jī)微偏移：

.card {
  position: relative;
  top:  random(-10px, 10px);   /* 輕微縱向偏移 */
  left: random(-10px, 10px);   /* 輕微橫向偏移 */
}

每張卡都略微不同，整體仍然整齊，卻多了手作質(zhì)感。 （對，就是“動態(tài)的整齊”??）

3) 隨機(jī)化的背景律動

做一片會隨機(jī)閃爍的星空：

.star {
  /* 每顆星的動畫時(shí)長在 1s 到 3s 之間 */
  animation: twinkle random(1s, 3s) infinite;
}

@keyframes twinkle {
  0%, 100% { opacity: 0; }
  50%      { opacity: 1; }
}

每顆星都有自己的節(jié)拍，整片天空就“活了”。

但也別忽視“坑點(diǎn)”

• 實(shí)驗(yàn)性特性：截至 2025 年，random() 仍在試驗(yàn)階段；主要在 Chrome/Edge 下通過實(shí)驗(yàn)開關(guān)（如 enable-experimental-web-platform-features）或 Houdini 路徑體驗(yàn)。
• 需要兜底：為不支持的瀏覽器寫可回退樣式，并把 random() 放在后聲明，讓支持的瀏覽器覆蓋之：

.element {
  transform: translateX(0);              /* 兜底 */
  transform: translateX(random(-100px, 100px)); /* 支持 random() 的走這里 */
}

• 適度使用：過多隨機(jī)會讓 UI 顯得“飄”。把隨機(jī)當(dāng)作調(diào)味料，不當(dāng)主菜。
• 可復(fù)現(xiàn)性：因其是偽隨機(jī)且與樣式重算時(shí)機(jī)有關(guān)，效果可能難以像腳本那樣精確復(fù)現(xiàn)；在需要嚴(yán)格一致性的場景（如導(dǎo)出幀）要謹(jǐn)慎。

為什么說它像“未來范兒”？

以往要這個(gè)級別的“動態(tài)感”，往往要寫一坨 JS：監(jiān)聽時(shí)機(jī) → 生成數(shù)值 → 注入樣式。random() 用一行 CSS做到了——減包、減耦合、減復(fù)雜度。

與此同時(shí)，它也契合了更輕的前端趨勢（比如 React 側(cè)重把更多行為下沉到平臺能力）：能用 CSS 的，就別上 JS；能聲明式的，就別命令式。

速記清單（拿了就用）

• 角度/長度/時(shí)間等帶單位的隨機(jī)：直接在 random() 里寫單位

rotate(random(-3deg, 3deg))

top: random(-8px, 8px)

animation-duration: random(120ms, 320ms)

• 漸進(jìn)增強(qiáng)：先寫確定值兜底，再寫 random()
• 可控范圍：把隨機(jī)幅度壓小（例如 ±3deg、±8px、1–3s），既顯靈動，又不突兀
• 可測試：為關(guān)鍵布局/交互避免隨機(jī)；把隨機(jī)留給裝飾性層

和 React / 動效框架如何配合？

• 在 組件樣式層引入 random()，對交互邏輯零侵入；
• 關(guān)鍵過渡（如路由切換、可訪問性相關(guān)動畫）仍建議確定性；
• 若需可回放或錄制，依舊用 JS 生成隨機(jī)源并下發(fā)變量更穩(wěn)。

最后的提醒

下次給組件加動效，不妨在樣式里點(diǎn)一撮 random()： 一個(gè)輕微傾斜、一次不經(jīng)意的閃爍、一丟丟位置的呼吸——足夠讓界面更像“活物”。