今天给大家分享一款纯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            {                 counter counter-reset : sum;            }                        #a:checked            {                 counter counter-increment : sum 64;            }            #b:checked            {                 counter counter-increment : sum 16;            }            #c:checked            {                 counter counter-increment : sum -32;            }            #d:checked            {                 counter counter-increment : sum 128;            }            #e:checked            {                 counter counter-increment : sum 4;            }            #f:checked            {                 counter counter-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实现的数字统计游戏的代码，自己做一下玩是不是更有意思，谢谢阅读，希望能帮到大家，请继续关注脚本之家，我们会努力分享更多优秀的文章。