網(wǎng)站制作

隨機數(shù)在CSS

發(fā)布時間：2017-01-12 13:17:51

我陷入了另一則有趣的問題。我想動畫元素與隨機動畫時間這是非隨機的起點：

這是我寫的使動畫的CSS：

到現(xiàn)在為止，一直都還不錯.但是沒有隨機發(fā)生，這是一個固定的2秒。

我想動畫的2秒的時間是隨機的。我想基本上寫：

哪里美元的隨機數(shù)是隨機的程序

css預(yù)處理器像SASS提供一個（）函數(shù)

這可能對你是完美的，它不太適合我。隨機數(shù)生成的預(yù)處理過程中有一個大的警告：

隨機在SASS是隨機選擇一個故事中的主要人物的名字。這只是隨機的時候?qū)懙?。它不會改變?/span>

換句話說，一旦CSS處理，隨機結(jié)束。這個數(shù)字被鎖定在價值（即直到永遠的預(yù)處理器運行一次）。

它不是像JavaScript中的一個隨機數(shù)（例如數(shù)學(xué)。（）），隨機數(shù)生成的JavaScript運行時。

所以在嘆息著人大聲我我能意識到，這實際上是用本地的CSS變量的絕佳機會（自定義屬性）！自己，他們不會做隨機數(shù)容易，但正如我們將看到的，他們?nèi)匀豢梢詭椭覀儭?/span>

如果你不熟悉他們，然后不要擔(dān)心。他們是本地變量，建立有效的CSS語言本身，但他們從不同的類變量，你可能熟悉一個預(yù)處理器SASS或更少?？死锼沽信e了許多好處而回：

你可以使用它們沒有預(yù)處理的需要

他們級聯(lián)。你可以設(shè)置一個變量在任何選擇器設(shè)置或重寫它的當(dāng)前值。

當(dāng)他們的變化（例如，平均值，進行查詢或其他）瀏覽器重畫的需要

你可以訪問使用JavaScript

后一點是什么對我們很重要。我們要生成JavaScript中的隨機數(shù)，然后將其移動到CSS的自定義屬性。

一是創(chuàng)建CSS自定義屬性需要一個默認值（如果我們在一個時刻寫JavaScript沒有以任何理由有用）：

現(xiàn)在我們可以用在我們的CSS這樣的變量：

非戲劇性地，我們我們開始在哪里。雖然這個演示現(xiàn)在看起來完全一樣，我們以前的動畫SVG技術(shù)，這是一個使用CSS變量代替。你可以測試，一切都只是改變CSS變量看動畫更新。

現(xiàn)在我們都設(shè)置了訪問和操作，通過JavaScript的自定義屬性。

從這里我們可以在SVG發(fā)現(xiàn)紅圈的變化動畫的時間……通過CSS變量設(shè)定屬性方法

這里是！一個隨機生成的數(shù)字在CSS被應(yīng)用到SVG動畫：

這是向前邁出的一步，因為隨機數(shù)生成的JavaScript運行時，因此每次不同。這非常接近我們想要的，但讓這一點更難了：讓我們隨機，動畫時間定期為它的運行

幸運的是，我們有JavaScript現(xiàn)在的工作，所以我們可以更新自定義屬性時，我們要。這里是一個例子，我們更新動畫時間每一秒：

這就是我所追求的：

記住，這是有用的CSS變量（自定義屬性）的支持仍然是一個小的片狀，所以要小心。雖然我們可以做的是逐步提高這個動畫一樣：

如果CSS變量不支持我們還是會得到一些動畫的一種表現(xiàn)，即使它不是精確我們想要的是什么

值得注意的是，CSS變量不是隨機的動畫持續(xù)時間的唯一途徑。我們可以通過JavaScript訪問DOM元素和應(yīng)用隨機值直接進入風(fēng)格：

我們甚至可以等待動畫之前，設(shè)置一個新的時間完成，如果我們想：

只是撒一個更可能在這里，你也可以做這個與eqcss

你希望隨機CSS本身可用嗎？我不知道有任何談話。即使有，我們可能將不得不等待很長一段時間來使用它。沿著這些線路，Philip Walton近寫的有多么困難寫一個真實的polyfill在CSS的隨機數(shù)。處理JavaScript更容易！

原創(chuàng)不易，未經(jīng)授權(quán)，嚴禁轉(zhuǎn)載

原文地址：http://www.mpian.cn/i,72,7045,0.html

更多+

感謝云智互聯(lián)，系統(tǒng)提前完成，在整個項目周期內(nèi)，云智互聯(lián)對待我們并不像是對待客戶，更像是朋友一樣，每一次，都能以專業(yè)的角度向我們提出更合理、更有效的解決方案，并快速、細致地完成我們的每一個需求，再次感謝以至誠之心做事的云智互聯(lián)團隊。

潘濤
我是東方龍馬集團，在云智家做了2個企業(yè)官網(wǎng)，服務(wù)態(tài)度超級好。如果想做網(wǎng)站，選擇他家一定不后悔。性價比高，服務(wù)態(tài)度好。值得你的信賴！

譚嬌
技術(shù)好，設(shè)計精良，操作便利，很專業(yè)！配套的服務(wù)和后續(xù)的服務(wù)都很好,網(wǎng)站封面堪稱精品，運行方便，后臺操作的簡單。技術(shù)還會耐心教我,很好的云智互聯(lián)（北京）科技有限公司，建站很不錯的。

陳曦
不錯，價格比較合適，重點是響應(yīng)速度蠻快，有什么問題都會馬上給你解決，公司很滿意，因為他們都是針對每個項目建了相應(yīng)的討論組，有問題可以再里面提出，人員分工到位，解決問題很及時。

張經(jīng)理