一款纯css3实现的数字统计游戏
今天给大家分享一款纯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实现的数字统计游戏的更多相关文章
- 一款纯css3实现的条纹加载条
之前为大家带来了很多加载动画. 基于prefixfree.js的进度加载条 ,基于jquery带百分比的响应式进度加载条.今天给大家分享一款纯css3实现的条纹加载条.带有响应式的效果.效果图如下 : ...
- 7款纯CSS3实现的炫酷动画应用
1.纯CSS3实现人物摇头动画 这次我们要来分享一款超级可爱的纯CSS3人物摇头动画,初始化的时候人物的各个部位是利用CSS3动画效果拼接而成,接下来就是人物听音乐的场景,一边听音乐一边摇着脑袋,十分 ...
- 7款纯CSS3实现的炫酷动画应用|慕课网只学有用的!
关于我们 | 时尚廊 ♦ 时尚廊,中国大陆地区首家以"Lounge"为概念的艺文空间 ♦ 7款纯CSS3实现的炫酷动画应用|慕课网只学有用的! 7款纯CSS3实现的炫酷动画应用
- 16款纯CSS3实现的loading加载动画
分享16款纯CSS3实现的loading加载动画.这是一款实用的可替代GIF格式图片的CSS3加载动画代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div clas ...
- 一款纯css3实现的漂亮的404页面
之前为大家分享了那些创意有趣的404页面, html5和css3打造一款创意404页面, HTML5可爱的404页面动画很逗的机器人.今天再给大家分享一款纯css3实现的漂亮的404页面.效果图如下: ...
- 一款纯css3实现的动画按钮
今天给大家分享一款纯css3实现的动画按钮.第一排的按钮当鼠标经过的背景色动画切换,图标从右侧飞入,第二排的按钮当鼠标经过的时候边框动画切换,图标右侧飞入,效果非常好,一起看下效果图: 在线预览 ...
- 一款纯css3实现的颜色渐变按钮
之前为大家分享了推荐10款纯css3实现的实用按钮,今天给大家带来一款纯css3实现的颜色渐变按钮.这款按钮的边框和文字的颜色通过css3实现两种颜色的渐变,效果非常好看,一起看下效果图: 在线预览 ...
- 推荐10款纯css3实现的实用按钮
在2014年的双11即将来临之季,爱编程小编为大家整理10款纯css3实现的按钮.希望这对坚守在前端的码农们有所帮助.亲,如果你有好的资源也可在本文留言,让从事编码的程序员们抱团.工作更轻松. No1 ...
- 一款纯css3实现的响应式导航
之前为大家介绍了好几款响应式导航.今天再给大家带来一款纯css3实现的响应式导航.这款导航还有个响应式的搜索框.废话少说,直接上图: 在线预览 源码下载 实现的代码. html代码: <di ...
随机推荐
- 推荐6款极具个性化的在线生成logo的网站
http://www.douban.com/group/topic/10434724/
- java提高篇之详解内部类
可以将一个类的定义放在另一个类的定义内部,这就是内部类. 内部类是一个非常有用的特性但又比较难理解使用的特性(鄙人到现在都没有怎么使用过内部类,对内部类也只是略知一二). 第一次见面 内部类我们从外面 ...
- 60款与DevOps相关的开源工具
原文地址:https://elasticbox.com/blog/de ... ools/ 你喜欢免费的东西吗?获得开发者社区支持的自动化,开源的工具是大家梦寐以求的.这里列举了 60+ 款最棒的开源 ...
- C# 调节图片亮度
原文地址:https://www.cnblogs.com/wjr408/p/6727118.html 昨天去客户那里测试,需求才开始,所以很简单,就是测一下能不能接受到视频或图片,然后保存下来,现场客 ...
- Accounting_会计基础
会计基础 1.会计:是以货币为主要计量单位,反映和监督一个单位经济活动的一种经济管理工作. 2.会计核算职能:指以货币为主要计量单位,通过确认.记录.计算.报告等环节,对特定主体的经济活动进行记账.算 ...
- Python fabs() 函数
描述 fabs() 方法返回数字的绝对值,如math.fabs(-10) 返回10.0. fabs() 函数类似于 abs() 函数,但是他有两点区别: abs() 是内置函数. fabs() 函数在 ...
- 在windows下部署Redis 当作系统服务器自动启动
部署Redis 其实Redis是可以安装成windows服务的,开机自启动,命令如下: redis-server --service-install redis.windows.conf 安装完之后, ...
- ES6 class setTimeout promise async/await 测试Demo
class Person { async getVersion () { return new Promise((resolve, reject) => { setTimeout(functio ...
- mysql-cluster 环境安装&配置
一.mysql-cluster 的介绍: 1.说心里话mysql-cluster这货性能上是不行的,之前一个同事测试了来的结果是8个主机组成的mysql-cluster性能 上搞不过一个单机的mysq ...
- php excel类 phpExcel使用方法介绍
phpExcel操作excel可以方便的加入图片,支持jpg gif png格式. 下载地址:http://www.codeplex.com/PHPExcel 下面是总结的几个使用方法 include ...