纯CSS实现的数学计算游戏

CSS Counter Game 主要使用了复选框(checkbox)、CSS3中的counter-*系列属性以及伪类、伪元素技术。是对counter属性用法的一个绝佳的实例演示。

CSS3

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2188
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@import url(http://fonts.googleapis.com/css?family=Droid+Sans:700);
/* counters */

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

HTML

CSS Counter Game 主要使用了复选框(checkbox)、CSS3中的counter-*系列属性以及伪类、伪元素技术。是对counter属性用法的一个绝佳的实例演示。

CSS3

编辑器支持Emmet

快捷键

CSS Counter Game 主要使用了复选框(checkbox)、CSS3中的counter-*系列属性以及伪类、伪元素技术。 是对counter属性用法的一个绝佳的实例演示。

CSS3

纯CSS实现的3D绿洲游戏场景动画

纯CSS实现冒险类RPG小游戏 - 地底世界

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：

CSS Counter Game 主要使用了复选框(checkbox)、CSS3中的counter-*系列属性以及伪类、伪元素技术。是对counter属性用法的一个绝佳的实例演示。