今天给大家分享一款纯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;            }                        h2            {                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实现的数字统计游戏的代码，自己做一下玩是不是更有意思，谢谢阅读，希望能帮到大家，请继续关注脚本之家，我们会努力分享更多优秀的文章。

实例教程 一款纯css3实现的数字统计游戏