实例教程 一款纯css3实现的数字统计游戏
今天给大家分享一款纯css3实现的数字统计游戏。这款游戏的规则的是将所有的数字相加等于72。这款游戏的数字按钮做得很美观,需要的时候可以借用下。一起看下效果图:
实现的代码。
html代码:
XML/HTML Code 复制内容到剪贴板 <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代码:
CSS Code 复制内容到剪贴板 body { counter counter-reset : sum; } #a:checked { counter counter-increment : sum 64; } #b:checked { counter counter-increment : sum 16; } #c:checked { counter counter-increment : sum -32; } #d:checked { counter counter-increment : sum 128; } #e:checked { counter counter-increment : sum 4; } #f:checked { counter 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!)' ; }以上就是css3实现的数字统计游戏的代码,自己做一下玩是不是更有意思,谢谢阅读,希望能帮到大家,请继续关注脚本之家,我们会努力分享更多优秀的文章。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。