CSS中有隨機數嗎？

CSS賦予網頁動態佈局和交互能力，但作為一種靜態語言，一旦值被設定，便無法更改。因此，隨機性的概念在此並不適用。運行時生成隨機數是JavaScript的領域，而非CSS。或者說，並非完全如此？如果加入一點用戶交互，我們實際上可以在CSS中生成一定程度的隨機性。讓我們來看一看！

來自其他語言的隨機化

正如Robin Rendle在CSS-Tricks的一篇文章中所解釋的那樣，可以使用CSS變量來實現某種程度的“動態隨機化”。但這些方案並非完全基於CSS，因為它們需要JavaScript來更新CSS變量，使其包含新的隨機值。

我們可以使用Sass或Less等預處理器來生成隨機值，但是一旦CSS代碼被編譯和導出，這些值就固定了，隨機性也就消失了。正如Jake Albaugh所解釋的：

Sass中的random就像隨機選擇故事中主角的名字一樣。只有在編寫時才是隨機的，它不會改變。

— jake albaugh (@jake_albaugh) 2016年12月29日

為什麼我在乎CSS中的隨機值？

過去，我開發過一些簡單的純CSS應用程序，例如瑣事遊戲、Simon遊戲和魔術技巧。但我想要做一些更複雜的事情。關於創建這些純CSS片段的有效性、實用性或可行性的討論，我將留待以後再進行。

基於一些棋盤遊戲可以用有限狀態機（FSM）表示的前提，它們可以用HTML和CSS來表示。所以我開始開發一個蛇梯遊戲（也稱為Chutes and Ladders）。這是一個簡單的遊戲。目標是通過避開蛇並嘗試向上爬梯子，將棋子從起點推進到棋盤的終點。

這個項目似乎可行，但我缺少一樣東西：擲骰子！

擲骰子（以及拋硬幣）普遍被認為是隨機化的。你擲骰子或拋硬幣，每次都會得到一個未知的值。

模擬隨機擲骰子

我打算疊加帶有標籤的圖層，並使用CSS動畫來“旋轉”並交換哪個圖層位於頂部。就像這樣：

模擬這種隨機性的代碼並不復雜，可以使用動畫和不同的動畫延遲來實現：

 <code>/* 最高的z-index是骰子的面数*/ @keyframes changeOrder { from { z-index: 6; } to { z-index: 1; } } /* 所有标签都使用绝对定位重叠*/ label { animation: changeOrder 3s infinite linear; background: #ddd; cursor: pointer; display: block; left: 1rem; padding: 1rem; position: absolute; top: 1rem; user-select: none; } /* 负延迟，以便动画的所有部分都在运动*/ label:nth-of-type(1) { animation-delay: -0.0s; } label:nth-of-type(2) { animation-delay: -0.5s; } label:nth-of-type(3) { animation-delay: -1.0s; } label:nth-of-type(4) { animation-delay: -1.5s; } label:nth-of-type(5) { animation-delay: -2.0s; } label:nth-of-type(6) { animation-delay: -2.5s; }</code>

動畫速度已放慢，以便於交互（但仍然足夠快，可以看出下面解釋的障礙）。偽隨機性也更清晰了。

但後來我遇到了一個障礙：我得到了隨機數，但有時，即使我點擊我的“骰子”，它也沒有返回任何值。

我嘗試增加動畫時間，這似乎有所幫助，但我仍然遇到一些意外的值。

這時，我做了大多數開發人員在遇到無法僅通過在線搜索解決的障礙時所做的事情：我以StackOverflow問題的形式向其他開發人員尋求幫助。

幸運的是，總是有資源的Temani Afif提出了一個解釋和一個解決方案。

簡單來說，問題是瀏覽器只在鼠標按下時激活的元素與鼠標抬起時激活的元素相同時才會觸發click/press事件。

由於旋轉動畫，鼠標按下時的頂部標籤不是鼠標抬起時的頂部標籤，除非我足夠快或足夠慢地讓動畫循環。這就是為什麼增加動畫時間會隱藏這些問題的原因。

解決方案是將“static”位置應用於打破堆疊上下文，並使用具有更高z-index的偽元素（如::before或::after）來佔據其位置。這樣，鼠標抬起時，活動標籤將始終位於頂部。

 <code>/* 活动标签将是静态的，并移出窗口*/ label:active { margin-left: 200%; position: static; } /* 标签的伪元素占据所有空间，并具有更高的z-index */ label:active::before { content: ""; position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: 10; }</code>

以下是包含解決方案的代碼，動畫時間更快：

進行此更改後，剩下的唯一事情是創建一個小的界面來繪製一個假的骰子來點擊，純CSS蛇梯遊戲就完成了。

此技術有一些明顯的缺點

• 需要用戶輸入：必須點擊標籤才能觸發“隨機數生成”。
• 不能很好地擴展：它適用於小的值集，但對於大的範圍來說很麻煩。
• 它不是真正的隨機，而是偽隨機：計算機可以很容易地檢測到在每個時刻將生成哪個值。

但另一方面，它是100%的CSS（不需要預處理器或其他外部幫助程序），並且對於人類用戶來說，它看起來可以是100%隨機的。

說到手……這種方法不僅可以用於隨機數，還可以用於任何隨機的東西。在這種情況下，我們用它來“隨機”選擇石頭剪刀布遊戲中電腦的選擇：

以上是CSS中有隨機數嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！