随机翻牌

JavaScript

巧用CSS steps()函数实现随机翻牌效果!

55 0

翻牌是大家很熟悉的一个互动效果,通常在抽奖活动中出现。那么不借助 JavaScript 是否能够实现随机翻牌效果?翻牌效果肯定是没有问题,CSS 没有随机函数,今天就来分享一个另类的交互实现思路。CSS 没有内置的“随机”函数,没有像 Javascript 中的 Math.random() 函数,也根本无法生成随机数或随机颜色。基于上面的问题,需要转换思路,让元素通过复杂的动画实现出随机的效果。实现的原理让纸牌快速地呈现出不同的状态,让这些纸牌在1秒内循环通过所有52个状态,用户点击每张纸牌就暂停动画,并