首页 > 代码库 > 一款纯css3实现的数字统计游戏
一款纯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实现的数字统计游戏
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。