今天，我们介绍一种数字统计游戏纯CSS3实现。当你点击数字时，它会自动计算出它们之间的差额。这个游戏的规则是把所有的数字加起来72，很漂亮，很有趣。我建议你试试看。





今天，我会用纯CSS3实现共享的数字统计的游戏。游戏的规则是72个数的总和。这个游戏的数字键，制作精美，可借当它是必要的。看看效果图。


实现的代码。

HTML代码：

xml代码将内容复制到剪贴板。



CSS计数器游戏


选择总计为72的数字：
六十四
十六
- 32
一百二十八
四
- 8






CSS3代码：

CSS代码将内容复制到剪贴板。


体
{
复位：补偿金额；
}

#：检查
{
增量：补偿金额64；
}
# B：检查
{
增量：补偿金额16；
}
# C：检查
{
补偿金额增量：32；
}
# D：检查
{
增量：补偿金额128；
}
# E：检查
{
增量：补偿金额4；
}
# F：检查
{
补偿金额增量：8；
}

总和：：以前
{
内容：=计数器（和）；
}

剩下的只是让事情变得美好。

体
{
保证金：32px；
字体：700 32px / 1'droid SANS，sans serif；
颜色：# FFF；
背景颜色：# 583f3f；
}

H1
{
保证金：00 32px；
字体大小：48px；
}

H2
{
保证金：00 8px 8px；
字体大小：继承；
}

部分
{
边距：16px；
填料：16px；
边界半径：4px；
溢出：隐藏；
背景颜色：RGBA（255, 255, 255。1）；
}

输入
{
位置：绝对；
左：- 9999px；
}

标签
{
浮点数：左；
保证金：8px；
填料：16px；
边界半径：4px；
边境：固体2px RGBA（255, 255, 255。4）；
背景颜色：RGBA（255, 255, 255。2）；
光标：指针；
过渡：all.1s；
}

标签：：以前
{
显示：内联；
}

输入：选中+标签
{
边境：固体2px # FFF；
背景颜色：RGBA（255, 255, 255。4）；
盒子的影子：00 10px # FFF；
}

跨度
{
浮点数：左；
保证金：8px；
填料：18px；
边界半径：4px；
背景颜色：RGBA（0, 0, 0。1）；
}

#：检查~ # B：检查~ # C：不（：检查）~ # D：不（：检查）~ # E：不（：检查）~ # F：检查~总和：：后。
{
内容：（万岁！）；
}




以上是数字统计游戏通过CSS3代码。你自己玩更有趣吗谢谢你的阅读。我们希望能帮助你。请注意它。我们将努力分享更多的优秀文章。