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


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

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

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

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

1.gif

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

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

概括

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

阅读剩余部分

相关阅读 >>

CSS3支持为网页添加多个背景图片吗

background-origin属性怎么用

html5和CSS3扁平化风格博客教程的资源分享

带你了解css中的3d效果

ie对CSS3的支持吗

transition-property属性怎么用

html5/CSS3专题 CSS3打造百度贴吧的3d翻牌效果的经典案例

CSS3 sticky不生效怎么办

CSS3实现条状百分比效果

如何解决CSS3 media不起作用的问题

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




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...

    正在狠努力加载,请稍候...