实例好代码教程 一款纯css3如何实现的数字统计游戏

网络
房子修得再大也是临时住所，只有那个小木匣才是永久的家，所以，屋宽不如心宽，身安不如心安！

　　今天给大家分享一款纯css3实现的数字统计游戏。这款游戏的规则的是将所有的数字相加等于72。这款游戏的数字按钮做得很美观，需要的时候可以借用下。一起看下效果图：

　　实现的代码。

　　html代码:

XML/HTML Code复制内容到剪贴板
  1. <h1>
  2. CSSCounterGame</h1>
  3. <section>
  4. <h2>
  5. Pickthenumbersthataddupto72:</h1>
  6. <inputid="a"type="checkbox"><labelfor="a">64</label>
  7. <inputid="b"type="checkbox"><labelfor="b">16</label>
  8. <inputid="c"type="checkbox"><labelfor="c">-32</label>
  9. <inputid="d"type="checkbox"><labelfor="d">128</label>
  10. <inputid="e"type="checkbox"><labelfor="e">4</label>
  11. <inputid="f"type="checkbox"><labelfor="f">-8</label>
  12. <spanclass="sum"></span>
  13. </section>

　　css3代码：

CSS Code复制内容到剪贴板
  1. body
  2. {
  3. countercounter-reset:sum;
  4. }
  6. #a:checked
  7. {
  8. countercounter-increment:sum64;
  9. }
  10. #b:checked
  11. {
  12. countercounter-increment:sum16;
  13. }
  14. #c:checked
  15. {
  16. countercounter-increment:sum-32;
  17. }
  18. #d:checked
  19. {
  20. countercounter-increment:sum128;
  21. }
  22. #e:checked
  23. {
  24. countercounter-increment:sum4;
  25. }
  26. #f:checked
  27. {
  28. countercounter-increment:sum-8;
  29. }
  31. .sum::before
  32. {
  33. content:'='counter(sum);
  34. }
  36. /*therestisjusttomakethingspretty*/
  38. body
  39. {
  40. margin:32px;
  41. font:70032px/1'DroidSans',sans-serif;
  42. color:#fff;
  43. background-color:#583f3f;
  44. }
  46. h1
  47. {
  48. margin:0032px;
  49. font-size:48px;
  50. }
  52. h2
  53. {
  54. margin:008px8px;
  55. font-size:inherit;
  56. }
  58. section
  59. {
  60. margin-bottom:16px;
  61. padding:16px;
  62. border-radius:4px;
  63. overflow:hidden;
  64. background-color:rgba(255,255,255,.1);
  65. }
  67. input
  68. {
  69. position:absolute;
  70. left:-9999px;
  71. }
  73. label
  74. {
  75. float:left;
  76. margin:8px;
  77. padding:16px;
  78. border-radius:4px;
  79. border:solid2pxrgba(255,255,255,.4);
  80. background-color:rgba(255,255,255,.2);
  81. cursor:pointer;
  82. transition:all.1s;
  83. }
  85. label::before
  86. {
  87. display:inline;
  88. }
  90. input:checked+label
  91. {
  92. border:solid2px#fff;
  93. background-color:rgba(255,255,255,.4);
  94. box-shadow:0010px#fff;
  95. }
  97. span
  98. {
  99. float:left;
  100. margin:8px;
  101. padding:18px;
  102. border-radius:4px;
  103. background-color:rgba(0,0,0,.1);
  104. }
  106. #a:checked~#b:checked~#c:not(:checked)~#d:not(:checked)~#e:not(:checked)~#f:checked~.sum::after
  107. {
  108. content:'(hooray!)';
  109. }

　　以上就是css3实现的数字统计游戏的代码，自己做一下玩是不是更有意思，谢谢阅读，希望能帮到大家，请继续关注，我们会努力分享更多优秀的文章。

您可能有感兴趣的文章
css让页脚保持在底部位置的四种方案
CSS如何使用Flex和Grid布局如何实现3D骰子
Flex布局史上最简单使用语法教程
新的CSS 伪类函数 :is() 和 :where()示例详解
纯CSS打字动画的如何实现示例