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>

转载于:https://www.cnblogs.com/lsxs-wy/p/9063985.html