纯 CSS 制作摇骰子（随机结果）

大家好，我是 Steven。

这一期，我们会做一个摇骰子的效果。等等，这个很容易？那就挑战一下，不用 JavaScript，只用 CSS 去制作，我们来看看怎么实现。

这个教程的视频版本在 www.bilibili.com/video/BV1Po… ，欢迎三连关注！

素材准备

首先，我们要准备一张图片：

里面是骰子从一到六的面板，然后为了等下转骰子的时候看上去随机一点，这里我将一到六的顺序掉乱一下。

HTML 的部分

打开 CodePen 编辑器，在 HTML 的部分新增一个 <div>，class 是 dice。

CSS 的部分

然后到 CSS 的部分，新增 body 选择器，用 Flexbox 的方法将内容上下左右居中。然后新增 .dice 选择器，设定刚才我们准备好的骰子图片，宽度和高度设定为 366px，由于我们的的骰子图片是横向的，所以 background-position 设定为 0% 100%。

例如我们把 x 的值改成 100%：

就会换成最后一个号码（四）先把他改回 0%。

好了，那我们要如何做到摇骰子的动作呢？新增 @keyframes random 定义一个动画，from 的区块把 background-position 设定为 0% 100%，而 to 的区块把 background-position 设定为 100% 100%。

由于 from 区块里面的定义和 .dice 里面的定义相同，所以在这里可以省略 from 区块，然后设定动画 animation，设定为 .2s，加速度是线性 linear，动画名称是 random，重覆次数是无限 infinite。

现在可以看到骰子在横向方向不停在转，但是这个不像摇骰子的效果，所以关键在这里，animation 可以指定进行的格数有多少，把加速度 linear 换成 ~~steps(5, start)~~（更正：steps(6, jump-none)，这样才不会漏掉一个，谢谢网友的反馈），就可以看到骰子在一个一个的转了。

好了，那下一步就是处理摇骰子结果的逻辑。在不用 JavaScript 的情况下，我们可以通过表单元素 checkbox 实现一开一关的逻辑。

调整一下 HTML 的部分，加入一个 checkbox，id 是 dice。再新增一个 <label> 标签，for 等于 checkbox 的 id，dice。再把 .dice 这个 <div> 包起来：

这样我们在点击骰子的同时，就可以触发到 checkbox 的点击。

在 CSS 的部分，新增 #dice 选择器，将 display 设定为 none，隐藏这个 checkbox。新增 #dice:checked + label .dice 选择器，即是当 checkbox 是勾选的状态的时候，控制后面的 label 里面的 .dice 的样式。

那我们在这里可以做什么呢？把 animation 暂停就可以了，animation-play-state 设定为 paused。

现在随机结果的效果已经实现了。

再在摇骰子的时候，在骰子的上面加一层装饰。

加入 .dice::before 选择器，将 content 设定为问号，背景颜色设定为 80% 透明度的白色。宽度和高度继承自父元素，设定为 inherit，display 设定为 flex，justify-content 与 align-items 设定为 center。

文字大小设定为大一点，320px，字体 font-family 是祖传的 Helvetica，然后要把背景变成模糊，加入 backdrop-filter，设定为 blur(20px)，同时加入 -webkit 的版本，再设定圆角 border-radius 为 60px。

最后，要在显示骰子的结果时，把问号这一层隐藏。加入 #dice:checked + label .dice::before 选择器，将 display 设定为 none。

我们来看看这个案例的完成效果

以上，就是这期要介绍的全部内容。

这个案例的源代码在 codepen.io/stevenlei/p…

你的支持是我的动力，请关注 CodingStartup 起码课，我们一起加油！