html css做骰子,纯 CSS 制作摇骰子（随机结果）

大家好，我是 Steven。

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

素材准备

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

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

HTML 的部分

打开 CodePen 编辑器，在 HTML 的部分新增一个

，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。再新增一个标签，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 起码课，我们一起加油！

html css做骰子,纯 CSS 制作摇骰子（随机结果）相关推荐

html css右下角三角形,纯CSS绘制三角形（各种角度）
CSS/HTML 的纯CSS绘制三角形(各种角度) 我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 C ...
[css] 怎样用纯CSS实现禁止鼠标点击事件？
[css] 怎样用纯CSS实现禁止鼠标点击事件? pointer-events: none; 是css3新出现的属性,意思就是禁止鼠标点击事件,当元素中有这一属性时,链接.点击事件统统失效. 个人简介 ...
html图片倒角,CSS实例：纯CSS打造斜角
关于CSS打造斜角,先说一下历史,在CSS+DIV流行以前,也就是用表格作为网页框架的时候,人们通过在一个单元格里加入一个斜角图片来来做这种效果的.这种技术现在已经完全过时了,这里不讨论.CSS+DI ...
html 纯css 树形结构,纯css实现树形结构方法教程
本文主要介绍了纯css实现树形结构的示例代码的相关资料,使用CSS和HTML就可以将一个多级无序列表的节点展现成树状结构,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧,希 ...
css表格排序,纯CSS实现表格排序-利用CSS 变量和Flexbox
1.引子今天闲逛知名前端资讯站Front-End Front,发现一个比较有意思的效果,给大家分享下,希望可以对大家有所启发. 纯CSS实现表格排序心急的同学,先看效果,我放在codepen上. ...
Css实现刘海,纯CSS样式写刘海屏效果
1. 效果: 2. 代码: 刘海? :root { --bg--color: #ed4014; } body { background: var(--bg--color); } .top_bar_di ...
查看全文的css,如何通过纯CSS实现“点击展开全文”功能
看标题大家不难猜到我今天要实现的功能,正如你打开 HTML代码这是前端开发博客的正文点击展开全文将上述代码加入到 single.php 文件里面,按钮一般命名为"点击展开全文" ...
css信号强度显示,纯css实现wifi信号图标及强弱/链接/加密状态
分享一段自己写的纯css实现的wifi连接的各种状态代码,希望能帮助到一些学习的朋友.默认图标大小为20px,已经通过transform放大,具体的可以见详细代码及预览. 运行代码纯css实现wif ...
马自达css滑动按钮,纯css的滑块开关按钮
之前在项目中使用滑块开关按钮,纯css写的,不考虑兼容低版本浏览器,先说下原理: 使用 checkbox 的选中 checked 属性改变css 伪类样式, 一定要使用-webkit-appeara ...

html css做骰子,纯 CSS 制作摇骰子（随机结果）

html css做骰子,纯 CSS 制作摇骰子（随机结果）相关推荐

最新文章

热门文章