Python部落(python.freelycode.com)組織翻譯，禁止轉載，歡迎轉發。

Robin Rendle 于2017年1月11日

前幾天，我遇到了一個特別有趣的問題。我想用random animation-duration 做一個動畫元素。下面是個開始，當然是非隨機的。

參見：Random numbers CSS(By Robin Rendle)：http://codepen.io/robinrendle/pen/1acd2c123621a542aa223022d402b6eb

這是我寫的CSS動畫代碼：

看起來，目前一切都很完美！但是，這并不是隨機的，動畫活動的周期時間是固定的2秒。

我希望將這固定的2秒鐘的動畫時間變成隨機時長。于是我改寫成這樣：

其中$randomNumber 是程序化隨機化的。像Sass等CSS預處理器都提供了一個隨機函數(random())

或許，你會認為這已經很完美了。但是，我認為還不夠完美。在預處理過程中產生的隨機數會顯示一個警告。

引用jake albaugh (@jake_albaugh) 的話說，“Sass中的隨機數就像是從一個故事中隨機的挑選主要人物的名字一樣。這些名字只有在作者寫作的時候是隨機的給人物命名的，之后這些人物名就不會改變”。

也就是說，只要CSS一執行完畢，隨機化就自然而然的結束了。隨機值也就永遠的被鎖定了(除非預處理器再度重新運行)。

這也不同于JavaScript中的隨機數類型，在JavaScript中，如Math.random()，隨機數是在JavaScript運行過程中生成的。

一番唉聲嘆氣之后，我意識到這是使用CSS內置變量(自定義屬性)的絕好機會。當然，內置變量自身是不會生成隨機數的。不過，我們很快就會見到，它們對我們依舊有很大的幫助。

如果你對這些隨機變量還不是很熟悉，也不必擔心。實際上，它們是CSS語言本身內置的變量。不過，相比于你可能比較熟悉的Sass或者Less等預處理器中的變量而言，它們肯定有所不同。Chris很快就列出了一堆優點：你可以在沒有預處理器(preprocessor)的情況下使用內置變量(native CSS variables)。

多層聯動?？梢栽谌魏芜x擇器中設置變量以設置或者覆蓋其當前值。

當它們的值發生改變時(如媒體查詢—media query或者其他的狀態)，瀏覽器會根據需要重新繪制。

你可以在JavaScript中對它們進行訪問和操作。

對我們來說，最后那一條才是最重要的。我們將在JavaScript中生成隨機數，然后將它通過自定義屬性應用到CSS中。

首先在，在CSS中創建一個我們需要的自定義屬性變量，并設置默認值：

現在，我們可以這樣在CSS中使用我們定義的變量：

非戲劇性的是，看起來我們現在依然處在問題的起點。然而，盡管演示和之前的SVG動畫毫無差別，但是這次我們用的是CSS變量。我們可以通過更改CSS中的變量然后對比動畫的變化來證明我們所做的一切都是有效的。

接下來，我通過JavaScript訪問和操作我們所設置的自定義屬性。

此時，我可以看到在SVG中會顯示出一個紅色的圓。然后我們通過setProperty方法來改變CSS中變量—animation-time的值。

現在好了，這就是在CSS中生成的隨機數在SVG動畫中得到應用。

參見：Random numbers CSS(By Robin Rendle)：http://codepen.io/robinrendle/pen/397deea9cfff5c5973d0051765ae7bef

毫無疑問，這是一個很好的進步。因為在JavaScript運行過程中生成隨機數，所以每次是不同的。這已經相當接近我們的目標了，不過我們要讓它再高級一點，就是讓變量animation-duration在運行的過程中實現周期性隨機化。

借助JavaScript我們可以隨時更新我們的自定義屬性。下面是一個我們讓變量animation-duration每秒實現一次更新的例子：

不錯，這就是我想要的結果。

參見：Random numbers CSS(By Robin Rendle)：http://codepen.io/robinrendle/pen/f3d3c2ff0ab6cd4aef12bed7c59386de

需要記住的一點是CSS自定義屬性方法的可用性有些牽強，所以一定要注意。當然，我們也可以慢慢改近這個動畫方法，比如：

如果不支持CSS變量(自定義屬性)，那么就會顯示動畫，自然這就不是我們想要的結果。

當然，如果CSS變量(自定義屬性)方法不是動畫時間(animation-duration)隨機化的唯一方法，那么我們之前的做法就變得毫無意義。我們可以通過JavaScript調用DOM元素，并將其產生的隨機值直接引入style中：

如果有必要，你甚至可以等到動畫結束之后再設置新的動畫時間。

順便提示另一個可能的方法，就是用EQCSS來實現：

你希望隨機化能夠在CSS中就能直接實現嗎？我不確定是否有確切的方法，不過即使有這樣的方法，可能我們也不得不再等一段時間才可以使用。沿著這些思路，Philip Walton最近寫道，在CSS中為隨機數寫一個真正的填充工具(polyfill)真的很難。 而在JavaScript中實現就容易多了。

英文原文：https://css-tricks.com/random-numbers-css/

譯者：Skull_ageles

總結

以上是生活随笔為你收集整理的css 加随机数 引用_在CSS中生成随机数的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。