现在 CSS 远不止我们现在看到的，它能够带来什么取决于创造性，我一直坚信没有实现不了的交互，只有想不到的交互。
要点
效果主要用到 CSS 中的动画属性 animation，自定义一个动画过程 randomAnim ，点击通过经典的 input checkbox + label 组合，动画控制器 animation-play-state: paused 和 animation-play-state: running;，下面是关键的steps()。
steps()是一个阶跃函数（timing-function），允许将动画或者过渡效果分割成段，而不是从一种状态持续到另一种状态的过渡。这个函数有两个参数：
- 第一个参数是一个正值，指定我希望动画分割的段数。
- 第二个参数是可选的，可设值：
start和end，表示在每个间隔的起点或是终点发生阶跃变化，默认是end。例如steps(1,start)，动画分成1步，动画执行时为左侧端点的部分为开始；steps(1,end)，动画分成1步，动画执行时为右侧结尾端点的部分为开始。
阶跃函数（
timing-function）是用于每两个关键帧之间，而不是整个动画。
更多编程相关知识，请访问：编程入门！！
以上就是巧用CSS steps()函数实现随机翻牌效果！的详细内容，更多文章请关注木庄网络博客！
相关阅读 >>
详细了解CSS3中的border-image-slice属性
更多相关阅读请进入《CSS3》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
