怎么用純css3實現數字統計游戲

本篇內容主要講解“怎么用純css3實現數字統計游戲”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“怎么用純css3實現數字統計游戲”吧!

　　今天給大家分享一款純css3實現的數字統計游戲。這款游戲的規則的是將所有的數字相加等于72。這款游戲的數字按鈕做得很美觀，需要的時候可以借用下。一起看下效果圖：

　　實現的代碼。

　　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.             margin: 32px;   

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-size: 48px;   

50.         }   

51.            

52.         h3   

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實現數字統計游戲”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！