今天给大家分享一款纯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!)';
}

注:本文爱编程原创文章,转载请注明原文地址:http://www.w2bc.com/Article/10331

一款纯css3实现的数字统计游戏的更多相关文章

  1. 一款纯css3实现的条纹加载条

    之前为大家带来了很多加载动画. 基于prefixfree.js的进度加载条 ,基于jquery带百分比的响应式进度加载条.今天给大家分享一款纯css3实现的条纹加载条.带有响应式的效果.效果图如下 : ...

  2. 7款纯CSS3实现的炫酷动画应用

    1.纯CSS3实现人物摇头动画 这次我们要来分享一款超级可爱的纯CSS3人物摇头动画,初始化的时候人物的各个部位是利用CSS3动画效果拼接而成,接下来就是人物听音乐的场景,一边听音乐一边摇着脑袋,十分 ...

  3. 7款纯CSS3实现的炫酷动画应用|慕课网只学有用的!

    关于我们 | 时尚廊 ♦ 时尚廊,中国大陆地区首家以"Lounge"为概念的艺文空间 ♦  7款纯CSS3实现的炫酷动画应用|慕课网只学有用的! 7款纯CSS3实现的炫酷动画应用

  4. 16款纯CSS3实现的loading加载动画

    分享16款纯CSS3实现的loading加载动画.这是一款实用的可替代GIF格式图片的CSS3加载动画代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div clas ...

  5. 一款纯css3实现的漂亮的404页面

    之前为大家分享了那些创意有趣的404页面, html5和css3打造一款创意404页面, HTML5可爱的404页面动画很逗的机器人.今天再给大家分享一款纯css3实现的漂亮的404页面.效果图如下: ...

  6. 一款纯css3实现的动画按钮

    今天给大家分享一款纯css3实现的动画按钮.第一排的按钮当鼠标经过的背景色动画切换,图标从右侧飞入,第二排的按钮当鼠标经过的时候边框动画切换,图标右侧飞入,效果非常好,一起看下效果图: 在线预览    ...

  7. 一款纯css3实现的颜色渐变按钮

    之前为大家分享了推荐10款纯css3实现的实用按钮,今天给大家带来一款纯css3实现的颜色渐变按钮.这款按钮的边框和文字的颜色通过css3实现两种颜色的渐变,效果非常好看,一起看下效果图: 在线预览  ...

  8. 推荐10款纯css3实现的实用按钮

    在2014年的双11即将来临之季,爱编程小编为大家整理10款纯css3实现的按钮.希望这对坚守在前端的码农们有所帮助.亲,如果你有好的资源也可在本文留言,让从事编码的程序员们抱团.工作更轻松. No1 ...

  9. 一款纯css3实现的响应式导航

    之前为大家介绍了好几款响应式导航.今天再给大家带来一款纯css3实现的响应式导航.这款导航还有个响应式的搜索框.废话少说,直接上图: 在线预览   源码下载 实现的代码. html代码: <di ...

随机推荐

  1. css3中-moz、-ms、-webkit 是什么意思

    -moz代表firefox浏览器私有属性-ms代表IE浏览器私有属性-webkit代表chrome.safari私有属性 私有属性例如:设置div圆角的大小 -webkit-border-radius ...

  2. 导出CCS3.3数据及使用matlab处理的方法

    CCS3.3是一款DSP的集成开发环境(IDE).在做DSP开发时,为验证算法.经常须要使用matlab进行算法验证,验证算法就须要数据.因此,一种交互的方法是: 使用DSP开发板连接CCS 用CCS ...

  3. App上架重磅通知:App Store安全新规17年1月生效

    作者:沙铭 来源:公众号 沙铭世界观 ID:mobview 做推广的也许并不了解什么是ATS(App Transport Security),不过这却是一个定时炸弹,引爆点在2016年底,后果就是你不 ...

  4. Python学习笔记011——内置函数eval()

    1 描述 eval()  函数用来执行一个字符串表达式,并返回表达式的值 2 语法 原文 eval(expression[, globals=None[, locals=None]]) express ...

  5. Mosquitto ---学习笔记

    Mosquitto的安装,可以参见:https://mosquitto.org/download/ [基础配置]Mosquitto服务的配置文件为/etc/mosquitto/mosquitto.co ...

  6. Python 字典 clear()方法

    描述 Python 字典 clear() 方法用于删除字典内所有元素. 语法 clear() 方法语法: D.clear() 参数 无. 返回值 该方法没有任何返回值. 实例 以下实例展示了 clea ...

  7. python dataframe 在merge时 产生笛卡尔积

    在pandas中,concat, merge, join的使用方法可以参考以下资料: http://blog.csdn.net/stevenkwong/article/details/52528616 ...

  8. jenkins 发送邮件失败

    jenkins 配置发送邮件,发送测试邮件,邮件发送失败: Failed to send out e-mail javax.mail.MessagingException: Could not con ...

  9. ps液化

    ps液化画笔工具属性 画笔大小:顾名思义画笔大小.液化处理范围 画笔密度:推动画笔时扭曲效果范围.以圆心为出发点,随密度增大扭曲影响范围越大(圆半径大小),达到最大值时圆圈内像素都会发生扭曲.好比真实 ...

  10. mini2440裸机音乐播放器(非常久曾经的笔记)

    [这是好久曾经写的.有点乱,没时间整理.当做记录用的.] 图片粘贴失效.没上传图,想要的直接下载文档吧. 项目目的:通过IIS,触摸屏,LCD模块实现音乐播放器功能(button上一首.下一首.播放. ...