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