温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

怎么用纯css3实现数字统计游戏

发布时间:2021-07-30 09:30:20 来源:亿速云 阅读:121 作者:chen 栏目:web开发

本篇内容主要讲解“怎么用纯css3实现数字统计游戏”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么用纯css3实现数字统计游戏”吧!

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

怎么用纯css3实现数字统计游戏

  实现的代码。

  html代码:

XML/HTML Code复制内容到剪贴板

  1. <h2>  

  2.         CSS Counter Game</h2>  

  3.     <section>  

  4.         <h3>  

  5.             Pick the numbers that add up to 72:</h2>  

  6.             <input id="a" type="checkbox"><label for="a">64</label>  

  7.             <input id="b" type="checkbox"><label for="b">16</label>  

  8.             <input id="c" type="checkbox"><label for="c">-32</label>  

  9.             <input id="d" type="checkbox"><label for="d">128</label>  

  10.             <input id="e" type="checkbox"><label for="e">4</label>  

  11.             <input id="f" type="checkbox"><label for="f">-8</label>  

  12.             <span class="sum"></span>  

  13.     </section>  

  css3代码:

CSS Code复制内容到剪贴板

  1. body   

  2.         {   

  3.             countercounter-reset: sum;   

  4.         }   

  5.            

  6.         #a:checked   

  7.         {   

  8.             countercounter-increment: sum 64;   

  9.         }   

  10.         #b:checked   

  11.         {   

  12.             countercounter-increment: sum 16;   

  13.         }   

  14.         #c:checked   

  15.         {   

  16.             countercounter-increment: sum -32;   

  17.         }   

  18.         #d:checked   

  19.         {   

  20.             countercounter-increment: sum 128;   

  21.         }   

  22.         #e:checked   

  23.         {   

  24.             countercounter-increment: sum 4;   

  25.         }   

  26.         #f:checked   

  27.         {   

  28.             countercounter-increment: sum -8;   

  29.         }   

  30.            

  31.         .sum::before   

  32.         {   

  33.             content'= ' counter(sum);   

  34.         }   

  35.            

  36.         /* the rest is just to make things pretty */  

  37.            

  38.         body   

  39.         {   

  40.             margin32px;   

  41.             font: 700 32px/1 'Droid Sans' , sans-serif;   

  42.             color#fff;   

  43.             background-color#583f3f;   

  44.         }   

  45.            

  46.         h2   

  47.         {   

  48.             margin: 0 0 32px;   

  49.             font-size48px;   

  50.         }   

  51.            

  52.         h3   

  53.         {   

  54.             margin: 0 0 8px 8px;   

  55.             font-size: inherit;   

  56.         }   

  57.            

  58.         section   

  59.         {   

  60.             margin-bottom16px;   

  61.             padding16px;   

  62.             border-radius: 4px;   

  63.             overflowhidden;   

  64.             background-color: rgba(255, 255, 255, .1);   

  65.         }   

  66.            

  67.         input   

  68.         {   

  69.             positionabsolute;   

  70.             left: -9999px;   

  71.         }   

  72.            

  73.         label   

  74.         {   

  75.             floatleft;   

  76.             margin8px;   

  77.             padding16px;   

  78.             border-radius: 4px;   

  79.             bordersolid 2px rgba(255, 255, 255, .4);   

  80.             background-color: rgba(255, 255, 255, .2);   

  81.             cursorpointer;   

  82.             transition: all .1s;   

  83.         }   

  84.            

  85.         label::before   

  86.         {   

  87.             displayinline;   

  88.         }   

  89.            

  90.         input:checked + label   

  91.         {   

  92.             bordersolid 2px #fff;   

  93.             background-color: rgba(255, 255, 255, .4);   

  94.             box-shadow: 0 0 10px #fff;   

  95.         }   

  96.            

  97.         span   

  98.         {   

  99.             floatleft;   

  100.             margin8px;   

  101.             padding18px;   

  102.             border-radius: 4px;   

  103.             background-color: rgba(0, 0, 0, .1);   

  104.         }   

  105.            

  106.         #a:checked ~ #b:checked ~ #c:not(:checked) ~ #d:not(:checked) ~ #e:not(:checked) ~ #f:checked ~ .sum::after   

  107.         {   

  108.             content' (hooray!)';   

  109.         }  

到此,相信大家对“怎么用纯css3实现数字统计游戏”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI