大家好,我是 Steven。
这一期,我们会做一个摇骰子的效果。等等,这个很容易?那就挑战一下,不用 JavaScript,只用 CSS 去制作,我们来看看怎么实现。
素材准备
首先,我们要准备一张图片:
里面是骰子从一到六的面板,然后为了等下转骰子的时候看上去随机一点,这里我将一到六的顺序掉乱一下。
HTML 的部分
打开 CodePen 编辑器,在 HTML 的部分新增一个
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。再新增一个 标签,for 等于 checkbox 的 id,dice。再把 .dice 这个
这样我们在点击骰子的同时,就可以触发到 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。
我们来看看这个案例的完成效果
以上,就是这期要介绍的全部内容。
你的支持是我的动力,请关注 CodingStartup 起码课,我们一起加油!