怎么用纯css3实现数字统计游戏
本篇内容主要讲解“怎么用纯css3实现数字统计游戏”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么用纯css3实现数字统计游戏”吧!
今天给大家分享一款纯css3实现的数字统计游戏。这款游戏的规则的是将所有的数字相加等于72。这款游戏的数字按钮做得很美观，需要的时候可以借用下。一起看下效果图：
实现的代码。
html代码:
XML/HTML Code复制内容到剪贴板
<h2>
CSS Counter Game</h2>
<section>
<h3>
Pick the numbers that add up to 72:</h2>
<input id="a" type="checkbox"><label for="a">64</label>
<input id="b" type="checkbox"><label for="b">16</label>
<input id="c" type="checkbox"><label for="c">-32</label>
<input id="d" type="checkbox"><label for="d">128</label>
<input id="e" type="checkbox"><label for="e">4</label>
<input id="f" type="checkbox"><label for="f">-8</label>
<span class="sum"></span>
</section>
css3代码：
CSS Code复制内容到剪贴板
body
{
countercounter-reset: sum;
}
#a:checked
{
countercounter-increment: sum 64;
}
#b:checked
{
countercounter-increment: sum 16;
}
#c:checked
{
countercounter-increment: sum -32;
}
#d:checked
{
countercounter-increment: sum 128;
}
#e:checked
{
countercounter-increment: sum 4;
}
#f:checked
{
countercounter-increment: sum -8;
}
.sum::before
{
content: '= ' counter(sum);
}
body
{
margin: 32px;
font: 700 32px/1 'Droid Sans' , sans-serif;
color: #fff;
background-color: #583f3f;
}
h2
{
margin: 0 0 32px;
font-size: 48px;
}
h3
{
margin: 0 0 8px 8px;
font-size: inherit;
}
section
{
margin-bottom: 16px;
padding: 16px;
border-radius: 4px;
overflow: hidden;
background-color: rgba(255, 255, 255, .1);
}
input
{
position: absolute;
left: -9999px;
}
label
{
float: left;
margin: 8px;
padding: 16px;
border-radius: 4px;
border: solid 2px rgba(255, 255, 255, .4);
background-color: rgba(255, 255, 255, .2);
cursor: pointer;
transition: all .1s;
}
label::before
{
display: inline;
}
input:checked + label
{
border: solid 2px #fff;
background-color: rgba(255, 255, 255, .4);
box-shadow: 0 0 10px #fff;
}
span
{
float: left;
margin: 8px;
padding: 18px;
border-radius: 4px;
background-color: rgba(0, 0, 0, .1);
}
#a:checked ~ #b:checked ~ #c:not(:checked) ~ #d:not(:checked) ~ #e:not(:checked) ~ #f:checked ~ .sum::after
{
content: ' (hooray!)';
}
到此，相信大家对“怎么用纯css3实现数字统计游戏”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
