实例教程 一款纯css3实现的数字统计游戏

前端  /  管理员 发布于 7年前   215

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

　　实现的代码。

　　html代码:

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

1. <h1>  
2.         CSS Counter Game</h1>  
3.     <section>  
4.         <h2>  
5.             Pick the numbers that add up to 72:</h1>  
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.             margin: 32px;   
41.             font: 700 32px/1 'Droid Sans' , sans-serif;   
42.             color: #fff;   
43.             background-color: #583f3f;   
44.         }   
45.            
46.         h1   
47.         {   
48.             margin: 0 0 32px;   
49.             font-size: 48px;   
50.         }   
51.            
52.         h2   
53.         {   
54.             margin: 0 0 8px 8px;   
55.             font-size: inherit;   
56.         }   
57.            
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.         }   
66.            
67.         input   
68.         {   
69.             position: absolute;   
70.             left: -9999px;   
71.         }   
72.            
73.         label   
74.         {   
75.             float: left;   
76.             margin: 8px;   
77.             padding: 16px;   
78.             border-radius: 4px;   
79.             border: solid 2px rgba(255, 255, 255, .4);   
80.             background-color: rgba(255, 255, 255, .2);   
81.             cursor: pointer;   
82.             transition: all .1s;   
83.         }   
84.            
85.         label::before   
86.         {   
87.             display: inline;   
88.         }   
89.            
90.         input:checked + label   
91.         {   
92.             border: solid 2px #fff;   
93.             background-color: rgba(255, 255, 255, .4);   
94.             box-shadow: 0 0 10px #fff;   
95.         }   
96.            
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.         }   
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实现的数字统计游戏的代码，自己做一下玩是不是更有意思，谢谢阅读，希望能帮到大家，请继续关注AIDI，我们会努力分享更多优秀的文章。