Home >Web Front-end >HTML Tutorial >A digital statistics game implemented in pure css3_html/css_WEB-ITnose

A digital statistics game implemented in pure css3_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal
2016-06-24 11:54:251278browse

Today I would like to share with you a digital statistics game implemented purely in CSS3. The rule of this game is to add all the numbers to equal 72. The digital buttons in this game are very beautiful and can be borrowed when needed. Let’s take a look at the renderings:

Online preview Source code download

Implemented code.

html code:

 <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 code:

 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!)';        }

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn