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

本文摘自PHP中文网，作者青灯夜游，侵删。

翻牌是大家很熟悉的一个互动效果，通常在抽奖活动中出现。那么不借助 JavaScript 是否能够实现随机翻牌效果？翻牌效果肯定是没有问题，CSS 没有随机函数，今天就来分享一个另类的交互实现思路。

CSS 没有内置的“随机”函数，没有像 Javascript 中的 Math.random() 函数，也根本无法生成随机数或随机颜色。

基于上面的问题，需要转换思路，让元素通过复杂的动画实现出随机的效果。实现的原理让纸牌快速地呈现出不同的状态，让这些纸牌在1秒内循环通过所有52个状态，用户点击每张纸牌就暂停动画，并让纸牌翻转。

在线预览：https://codepen.io/quintiontang/pen/OJmJRrV

此方案不足的地方就是无法避免三张牌出现相同的花色和牌面

概括

使用动画使元素看起来随机行为的这个思路是不很有趣，有点出乎意料，大部分用户看到这个效果肯定意识不到时纯 CSS 实现的。

阅读剩余部分

相关阅读 >>

CSS3 border-image-outset属性怎么用？

使用html5/CSS3五步快速制作便签贴特效代码示例分享（图文）

CSS3有哪些新特性？CSS3新特性详解

animation-direction属性怎么用

CSS3怎么实现字体倒影

css实现基于用户滚动应用（代码）

CSS3 如何实现进度条效果

通过代码示例，了解CSS3+javascript按钮水波纹效果

ie不支持CSS3动画吗

CSS3中的2d变形有哪些

更多相关阅读请进入《CSS3》频道 >>

书籍

Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元   人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者

转载请注明出处：木庄网络博客 » 巧用CSS steps()函数实现随机翻牌效果！