今天介绍一款纯css3实现的数字统计游戏，当你点击数字时，它会自动计算他们之间的和或者是差，这款游戏的规则的是将所有的数字相加等于72。很美观也很好玩，建议大家尝试一下
今天给大家分享一款纯css3实现的数字统计游戏。这款游戏的规则的是将所有的数字相加等于72。这款游戏的数字按钮做得很美观，需要的时候可以借用下。一起看下效果图：
实现的代码。
html代码:
XML/HTML Code复制内容到剪贴板
<h1>
CSS Counter Game</h1>
<section>
<h2>
Pick the numbers that add up to 72:</h1>
<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);
}
/* the rest is just to make things pretty */
body
{
margin: 32px;
font: 700 32px/1 'Droid Sans' , sans-serif;
color: #fff;
background-color: #583f3f;
}
h1
{
margin: 0 0 32px;
font-size: 48px;
}
更新时间：2014-12-08
