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

浏览数：28 / 时间：2015年06月09日

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

实现的代码。

html代码:

 <h1>
        CSS Counter Game</h1>
    <section>
        <h2>
            Pick the numbers that add up to 72:</h1>
            <input id="a" type="checkbox"><label for="a">64</label>
            <input id="b" type="checkbox"><label for="b">16</label>
            <input id="c" type="checkbox"><label for="c">-32</label>
            <input id="d" type="checkbox"><label for="d">128</label>
            <input id="e" type="checkbox"><label for="e">4</label>
            <input id="f" type="checkbox"><label for="f">-8</label>
            <span class="sum"></span>
    </section>

css3代码：

 body
        {
            counter-reset: sum;
        }
        
        #a:checked
        {
            counter-increment: sum 64;
        }
        #b:checked
        {
            counter-increment: sum 16;
        }
        #c:checked
        {
            counter-increment: sum -32;
        }
        #d:checked
        {
            counter-increment: sum 128;
        }
        #e:checked
        {
            counter-increment: sum 4;
        }
        #f:checked
        {
            counter-increment: sum -8;
        }
        
        .sum::before
        {
            content: ‘= ‘ counter(sum);
        }
        
        /* the rest is just to make things pretty */
        
        body
        {
            margin: 32px;
            font: 700 32px/1 ‘Droid Sans‘ , sans-serif;
            color: #fff;
            background-color: #583f3f;
        }
        
        h1
        {
            margin: 0 0 32px;
            font-size: 48px;
        }
        
        h2
        {
            margin: 0 0 8px 8px;
            font-size: inherit;
        }
        
        section
        {
            margin-bottom: 16px;
            padding: 16px;
            border-radius: 4px;
            overflow: hidden;
            background-color: rgba(255, 255, 255, .1);
        }
        
        input
        {
            position: absolute;
            left: -9999px;
        }
        
        label
        {
            float: left;
            margin: 8px;
            padding: 16px;
            border-radius: 4px;
            border: solid 2px rgba(255, 255, 255, .4);
            background-color: rgba(255, 255, 255, .2);
            cursor: pointer;
            transition: all .1s;
        }
        
        label::before
        {
            display: inline;
        }
        
        input:checked + label
        {
            border: solid 2px #fff;
            background-color: rgba(255, 255, 255, .4);
            box-shadow: 0 0 10px #fff;
        }
        
        span
        {
            float: left;
            margin: 8px;
            padding: 18px;
            border-radius: 4px;
            background-color: rgba(0, 0, 0, .1);
        }
        
        #a:checked ~ #b:checked ~ #c:not(:checked) ~ #d:not(:checked) ~ #e:not(:checked) ~ #f:checked ~ .sum::after
        {
            content: ‘ (hooray!)‘;
        }