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

最新推荐文章于 2022-08-28 08:55:06 发布

转载最新推荐文章于 2022-08-28 08:55:06 发布 · 311 阅读

文章标签：

#css3数字统计

本文介绍了一款使用纯CSS3实现的数字统计游戏，玩家需要选择数字使它们的总和等于72。游戏通过巧妙利用CSS计数器来实现动态显示效果，并提供了美观的界面设计。

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

实现的代码。

html代码:

CSS Counter Game

Pick the numbers that add up to 72:

-32

128

-8

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;

}

{

margin: 0 0 32px;

font-size: 48px;

}

{

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

}