今天给大家分享一款纯css3实现的数字统计游戏。这款游戏的规则的是将所有的数字相加等于72。这款游戏的数字按钮做得很美观，需要的时候可以借用下。一起看下效果图：
实现的代码。
html代码:
XML/HTML Code复制内容到剪贴板
<h1>CSSCounterGame</h1><section><h2>Pickthenumbersthataddupto72:</h1><inputid="a"type="checkbox"><labelfor="a">64</label><inputid="b"type="checkbox"><labelfor="b">16</label><inputid="c"type="checkbox"><labelfor="c">-32</label><inputid="d"type="checkbox"><labelfor="d">128</label><inputid="e"type="checkbox"><labelfor="e">4</label><inputid="f"type="checkbox"><labelfor="f">-8</label><spanclass="sum"></span></section> css3代码：
CSS Code复制内容到剪贴板
body{countercounter-reset:sum;}#a:checked{countercounter-increment:sum64;}#b:checked{countercounter-increment:sum16;}#c:checked{countercounter-increment:sum-32;}#d:checked{countercounter-increment:sum128;}#e:checked{countercounter-increment:sum4;}#f:checked{countercounter-increment:sum-8;}.sum::before{content:'='counter(sum);}body{margin:32px;font:70032px/1'DroidSans',sans-serif;color:#fff;background-color:#583f3f;}h1{margin:0032px;font-size:48px;}h2{margin:008px8px;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:solid2pxrgba(255,255,255,.4);background-color:rgba(255,255,255,.2);cursor:pointer;transition:all.1s;}label::before{display:inline;}input:checked+label{border:solid2px#fff;background-color:rgba(255,255,255,.4);box-shadow:0010px#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实现的数字统计游戏的代码，自己做一下玩是不是更有意思，谢谢阅读，希望能帮到大家，请继续关注，我们会努力分享更多优秀的文章。
