CSS技术实例1-使用CSS计数器实现数值计算小游戏实例页面

一　　实例要达到的要求如图所示：

 

二　　分析

　　1.7个圆角矩形标签（或按钮）

　　2. 点击触发并开始运算，最后一个标签显示结果

　　3.计算成功后弹出“万岁”字眼

三　　代码实现

关键CSS代码：

body {
  counter-reset: sum;
}

input {
  position: absolute;
  clip: rect(0 0 0 0);	
}

#number1:checked { counter-increment: sum 64; }
#number2:checked { counter-increment: sum 16; }
#number3:checked { counter-increment: sum -32; }
#number4:checked { counter-increment: sum 128; }
#number5:checked { counter-increment: sum 4; }
#number6:checked { counter-increment: sum -8; }

.sum::before {
  content: '= ' counter(sum);
}

#number1:checked ~ 
#number2:checked ~ 
#number3:not(:checked) ~ 
#number4:not(:checked) ~ 
#number5:not(:checked) ~ 
#number6:checked ~ 
.sum::after {
  content: ' (万岁！)';
}

HTML代码：

<p><strong>选择下面的数值，使其计算结果为72：</strong></p>
<input type="checkbox" id="number1"><label for="number1">64</label>
<input type="checkbox" id="number2"><label for="number2">+16</label>
<input type="checkbox" id="number3"><label for="number3">-32</label>
<input type="checkbox" id="number4"><label for="number4">+128</label>
<input type="checkbox" id="number5"><label for="number5">+4</label>
<input type="checkbox" id="number6"><label for="number6">-8</label>
<strong class="sum"></strong>