如何用CSS steps()函數(shù)實現(xiàn)隨機翻牌效果

這篇文章主要介紹了如何用CSS steps()函數(shù)實現(xiàn)隨機翻牌效果的相關(guān)知識，內(nèi)容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇如何用CSS steps()函數(shù)實現(xiàn)隨機翻牌效果文章都會有所收獲，下面我們一起來看看吧。

CSS 沒有內(nèi)置的“隨機”函數(shù)，沒有像 Javascript 中的 Math.random() 函數(shù)，也根本無法生成隨機數(shù)或隨機顏色。

基于上面的問題，需要轉(zhuǎn)換思路，讓元素通過復雜的動畫實現(xiàn)出隨機的效果。實現(xiàn)的原理讓紙牌快速地呈現(xiàn)出不同的狀態(tài)，讓這些紙牌在1秒內(nèi)循環(huán)通過所有52個狀態(tài)，用戶點擊每張紙牌就暫停動畫，并讓紙牌翻轉(zhuǎn)。

此方案不足的地方就是無法避免三張牌出現(xiàn)相同的花色和牌面

概括

使用動畫使元素看起來隨機行為的這個思路是不很有趣，有點出乎意料，大部分用戶看到這個效果肯定意識不到時純 CSS 實現(xiàn)的。

現(xiàn)在 CSS 遠不止我們現(xiàn)在看到的，它能夠帶來什么取決于創(chuàng)造性，我一直堅信沒有實現(xiàn)不了的交互，只有想不到的交互。

要點

效果主要用到 CSS 中的動畫屬性 animation，自定義一個動畫過程 randomAnim ，點擊通過經(jīng)典的 input checkbox + label 組合，動畫控制器 animation-play-state: paused 和 animation-play-state: running;，下面是關(guān)鍵的steps()。

steps()是一個階躍函數(shù)（timing-function），允許將動畫或者過渡效果分割成段，而不是從一種狀態(tài)持續(xù)到另一種狀態(tài)的過渡。這個函數(shù)有兩個參數(shù)：

• 第一個參數(shù)是一個正值，指定我希望動畫分割的段數(shù)。

• 第二個參數(shù)是可選的，可設(shè)值：start 和 end，表示在每個間隔的起點或是終點發(fā)生階躍變化，默認是 end。例如 steps(1,start)，動畫分成1步，動畫執(zhí)行時為左側(cè)端點的部分為開始；steps(1,end)，動畫分成1步，動畫執(zhí)行時為右側(cè)結(jié)尾端點的部分為開始。

階躍函數(shù)（timing-function）是用于每兩個關(guān)鍵幀之間，而不是整個動畫。

關(guān)于“如何用CSS steps()函數(shù)實現(xiàn)隨機翻牌效果”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“如何用CSS steps()函數(shù)實現(xiàn)隨機翻牌效果”知識都有一定的了解，大家如果還想學習更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道。