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

Robin Rendle 于2017年1月11日

前幾天，我遇到了一個(gè)特別有趣的問(wèn)題。我想用random animation-duration 做一個(gè)動(dòng)畫(huà)元素。下面是個(gè)開(kāi)始，當(dāng)然是非隨機(jī)的。

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

這是我寫(xiě)的CSS動(dòng)畫(huà)代碼：

看起來(lái)，目前一切都很完美！但是，這并不是隨機(jī)的，動(dòng)畫(huà)活動(dòng)的周期時(shí)間是固定的2秒。

我希望將這固定的2秒鐘的動(dòng)畫(huà)時(shí)間變成隨機(jī)時(shí)長(zhǎng)。于是我改寫(xiě)成這樣：

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

或許，你會(huì)認(rèn)為這已經(jīng)很完美了。但是，我認(rèn)為還不夠完美。在預(yù)處理過(guò)程中產(chǎn)生的隨機(jī)數(shù)會(huì)顯示一個(gè)警告。

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

也就是說(shuō)，只要CSS一執(zhí)行完畢，隨機(jī)化就自然而然的結(jié)束了。隨機(jī)值也就永遠(yuǎn)的被鎖定了(除非預(yù)處理器再度重新運(yùn)行)。

這也不同于JavaScript中的隨機(jī)數(shù)類型，在JavaScript中，如Math.random()，隨機(jī)數(shù)是在JavaScript運(yùn)行過(guò)程中生成的。

一番唉聲嘆氣之后，我意識(shí)到這是使用CSS內(nèi)置變量(自定義屬性)的絕好機(jī)會(huì)。當(dāng)然，內(nèi)置變量自身是不會(huì)生成隨機(jī)數(shù)的。不過(guò)，我們很快就會(huì)見(jiàn)到，它們對(duì)我們依舊有很大的幫助。

如果你對(duì)這些隨機(jī)變量還不是很熟悉，也不必?fù)?dān)心。實(shí)際上，它們是CSS語(yǔ)言本身內(nèi)置的變量。不過(guò)，相比于你可能比較熟悉的Sass或者Less等預(yù)處理器中的變量而言，它們肯定有所不同。Chris很快就列出了一堆優(yōu)點(diǎn)：你可以在沒(méi)有預(yù)處理器(preprocessor)的情況下使用內(nèi)置變量(native CSS variables)。

多層聯(lián)動(dòng)。可以在任何選擇器中設(shè)置變量以設(shè)置或者覆蓋其當(dāng)前值。

當(dāng)它們的值發(fā)生改變時(shí)(如媒體查詢—media query或者其他的狀態(tài))，瀏覽器會(huì)根據(jù)需要重新繪制。

你可以在JavaScript中對(duì)它們進(jìn)行訪問(wèn)和操作。

對(duì)我們來(lái)說(shuō)，最后那一條才是最重要的。我們將在JavaScript中生成隨機(jī)數(shù)，然后將它通過(guò)自定義屬性應(yīng)用到CSS中。

首先在，在CSS中創(chuàng)建一個(gè)我們需要的自定義屬性變量，并設(shè)置默認(rèn)值：

現(xiàn)在，我們可以這樣在CSS中使用我們定義的變量：

非戲劇性的是，看起來(lái)我們現(xiàn)在依然處在問(wèn)題的起點(diǎn)。然而，盡管演示和之前的SVG動(dòng)畫(huà)毫無(wú)差別，但是這次我們用的是CSS變量。我們可以通過(guò)更改CSS中的變量然后對(duì)比動(dòng)畫(huà)的變化來(lái)證明我們所做的一切都是有效的。

接下來(lái)，我通過(guò)JavaScript訪問(wèn)和操作我們所設(shè)置的自定義屬性。

此時(shí)，我可以看到在SVG中會(huì)顯示出一個(gè)紅色的圓。然后我們通過(guò)setProperty方法來(lái)改變CSS中變量—animation-time的值。

現(xiàn)在好了，這就是在CSS中生成的隨機(jī)數(shù)在SVG動(dòng)畫(huà)中得到應(yīng)用。

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

毫無(wú)疑問(wèn)，這是一個(gè)很好的進(jìn)步。因?yàn)樵贘avaScript運(yùn)行過(guò)程中生成隨機(jī)數(shù)，所以每次是不同的。這已經(jīng)相當(dāng)接近我們的目標(biāo)了，不過(guò)我們要讓它再高級(jí)一點(diǎn)，就是讓變量animation-duration在運(yùn)行的過(guò)程中實(shí)現(xiàn)周期性隨機(jī)化。

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

不錯(cuò)，這就是我想要的結(jié)果。

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

需要記住的一點(diǎn)是CSS自定義屬性方法的可用性有些牽強(qiáng)，所以一定要注意。當(dāng)然，我們也可以慢慢改近這個(gè)動(dòng)畫(huà)方法，比如：

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

當(dāng)然，如果CSS變量(自定義屬性)方法不是動(dòng)畫(huà)時(shí)間(animation-duration)隨機(jī)化的唯一方法，那么我們之前的做法就變得毫無(wú)意義。我們可以通過(guò)JavaScript調(diào)用DOM元素，并將其產(chǎn)生的隨機(jī)值直接引入style中：

如果有必要，你甚至可以等到動(dòng)畫(huà)結(jié)束之后再設(shè)置新的動(dòng)畫(huà)時(shí)間。

順便提示另一個(gè)可能的方法，就是用EQCSS來(lái)實(shí)現(xiàn)：

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

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

譯者：Skull_ageles

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。