先来看一看label是什么神奇的东西:
html:
<!DOCTYPE html> <head> <meta charset="utf-8" /> <title>打地鼠</title> <link href="style.css" rel="stylesheet" /> </head> <body> <input type="checkbox" id="check"/>我是复选框 <div class="label"> <label for="check">点我试试</label> </div> </body>check the result
css:
.label { margin-top : 100px; }
这是一个很简单的例子,但是很好地说明了label的用法,label的for指向元素的id,这样点击label就相当于点击了元素,在这里也就是checkbox。所以不管我们的label在什么位置,我们都可以去点击到checkbox。
那么这有什么用呢?我们用到checked属性就不一样了。
html:
<!DOCTYPE html> <head> <meta charset="utf-8" /> <title>打地鼠</title> <link href="style.css" rel="stylesheet" /> </head> <body> <input type="checkbox" id="check" /> <div class="div"></div> <div class="label"> <label for="check">点我试试</label> </div> </body>check the result
css:
input[type="checkbox"] { opacity : 0; } .div { width : 100px; height : 100px; margin-top : 10px; background-color : red; } input[type="checkbox"]:checked ~ .div{ background-color : blue; } .label { width : 100px; height : 30px; margin-top : 10px; } .label label { width : 100%; height : 100%; line-height : 30px; border-radius : 5px; background-color : black; color : white; display : block; text-align : center; cursor : pointer; }
我们用label来控制checkbox的checked状态,然后在checked和非checked的时候分别设置checkbox后面的div的背景色,然后我们把checkbox隐藏起来,这样在点击label的时候,div的背景色就能随之变化了。就好像响应了点击一样。
明白了这一点,我们就可以实现打地鼠中的开始按钮的响应了。
html:
<!DOCTYPE html> <head> <meta charset="utf-8" /> <title>打地鼠</title> <link href="style.css" rel="stylesheet" /> </head> <body> <div class="container"> <input id="startFlag" type="checkbox"> <div id="start" class="window"> <h1>打呀打地鼠</h1> <p>不许笑,一个严肃的 CSS 游戏</p> <div class="btn-group"> <div class="susliks"></div> <label for="startFlag">开始</label> </div> </div> <div class="time-wrapper"> <p>游戏时间:</p> <div class="time"> <div class="progress"></div> </div> </div> <div id="map"> <div class="map"></div> <div class="map"></div> <div class="map"></div> <div class="map"></div> <div class="map"></div> <div class="map"></div> <div class="map"></div> <div class="map"></div> <div class="map"></div> <div class="map"></div> <div class="map"></div> <div class="map"></div> <div class="map"></div> <div class="map"></div> <div class="map"></div> <div class="map"></div> <div class="map"></div> <div class="map"></div> <div class="map"></div> </div> <div> <div class="group"> <div class="susliks"></div> <div class="hole"></div> </div> <div class="group"> <div class="susliks"></div> <div class="hole"></div> </div> <div class="group"> <div class="susliks"></div> <div class="hole"></div> </div> <div class="group"> <div class="susliks"></div> <div class="hole"></div> </div> <div class="group"> <div class="susliks"></div> <div class="hole"></div> </div> <div class="group"> <div class="susliks"></div> <div class="hole"></div> </div> </div> <div class="points"> <div class="point">0</div> </div> </div> </body>check the result
css:
* { padding : 0px; margin : 0px; box-sizing: border-box; } .container { position : absolute; left : 50%; top : 50%; width : 600px; height : 600px; margin-left : -300px; margin-top : -300px; border : 1px solid black; overflow : hidden; background: -webkit-linear-gradient(top, #8adcf7 0%, #bbe8fd 100%); background: linear-gradient(to bottom, #8adcf7 0%, #bbe8fd 100%); } .window { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #000; z-index: 9; -webkit-transition: opacity 0.6s; transition: opacity 0.6s; } .susliks { position : relative; left : 0px; top : 6px; margin : 0px auto; width : 56px; height : 100px; border-radius : 20px; background : #e3c498; background-image : -webkit-radial-gradient(20px 23px, circle, #000000 5%, rgba(255, 255, 255, 0) 5%), -webkit-radial-gradient(17px 20px, circle, #ffffff 10%, rgba(255, 255, 255, 0) 10%), -webkit-radial-gradient(36px 23px, circle, #000000 5%, rgba(255, 255, 255, 0) 5%), -webkit-radial-gradient(39px 20px, circle, #ffffff 10%, rgba(255, 255, 255, 0) 10%), -webkit-radial-gradient(center 36px, circle, #000000 8%, rgba(255, 255, 255, 0) 8%), -webkit-radial-gradient(center 48px, circle, #ffffff 20%, rgba(255, 255, 255, 0) 20%); background-image : radial-gradient(circle at 20px 23px, #000000 5%, rgba(255, 255, 255, 0) 5%), radial-gradient(circle at 17px 20px, #ffffff 10%, rgba(255, 255, 255, 0) 10%), radial-gradient(circle at 36px 23px, #000000 5%, rgba(255, 255, 255, 0) 5%), radial-gradient(circle at 39px 20px, #ffffff 10%, rgba(255, 255, 255, 0) 10%), radial-gradient(circle at center 36px, #000000 8%, rgba(255, 255, 255, 0) 8%), radial-gradient(circle at center 48px, #ffffff 20%, rgba(255, 255, 255, 0) 20%); } .susliks:before, .susliks:after { content : ''; left : -5px; top : -5px; width : 20px; height : 20px; position : absolute; background : #e3c498; border-radius : 50%; background-image : -webkit-radial-gradient(center, circle, #000000 40%, rgba(255, 255, 255, 0) 40%); background-image : radial-gradient(circle at center, #000000 40%, rgba(255, 255, 255, 0) 40%); } .susliks:after { left : auto; right : -5px; } h1, p { color: #fff; text-align: center; } h1 { line-height: 50px; } .btn-group { margin: 80px auto; width: 100px; height: 90px; overflow: hidden; position: relative; } .btn-group label { display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 40px; background: #51a70d; color: #fff; text-align: center; line-height: 40px; cursor: pointer; border-bottom: 4px solid #62b210; border-radius: 4px; } .hole { position : absolute; left : 0px; top : 70px; width : 68px; height : 100px; background-image : -webkit-linear-gradient(left, #2a7d2f 0%, #78fc73 25%, #78fc73 35%, #113e15 95%); background-image : linear-gradient(to right, #2a7d2f 0%, #78fc73 25%, #78fc73 35%, #113e15 95%); border-left : 1px solid #236d22; box-shadow : 0px 2px 5px 0px rgba(0, 0, 0, 0.6); } .hole:before { display : block; content : ''; position : absolute; width : 84px; height : 24px; margin-left : -8px; top : -24px; background-image : -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.3) 2px, rgba(255, 255, 255, 0.3) 3px, rgba(255, 255, 255, 0) 4px ), -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.4) 3px, rgba(255, 255, 255, 0.2) 5px, rgba(255, 255, 255, 0) 6px ), -webkit-linear-gradient(left, #2a7d2f 0%, #78fc73 25%, #78fc73 35%, #113e15 95%); background-image : linear-gradient(to bottom, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.3) 2px, rgba(255, 255, 255, 0.3) 3px, rgba(255, 255, 255, 0) 4px ), linear-gradient(to top, rgba(0, 0, 0, 0.4) 3px, rgba(255, 255, 255, 0.2) 5px, rgba(255, 255, 255, 0) 6px ), linear-gradient(to right, #2a7d2f 0%, #78fc73 25%, #78fc73 35%, #113e15 95%); } .time-wrapper { position: absolute; left: -150px; top: 20px; } #startFlag:checked ~ .time-wrapper { left: 20px; } .time-wrapper p { color: #fff; line-height: 24px; } .time { border: 2px solid #fff; width: 140px; height: 20px; } .time .progress { height: 16px; width: 0; } #map { position: absolute; bottom: 0; left: -600px; width: 1800px; height: 800px; -webkit-transform: perspective(600px) rotateX(45deg); transform: perspective(600px) rotateX(45deg); -webkit-transform-origin: center bottom; -ms-transform-origin: center bottom; transform-origin: center bottom; } .map { width: 5%; height: 100%; float: left; } .map:nth-child(2n) { background: #62b210; } .map:nth-child(2n+1) { background: #51a70d; } .group { position: absolute; width : 68px; } .group:nth-child(1) { left: 45px; top: 210px; } .group:nth-child(2) { left: 165px; top: 270px; } .group:nth-child(3) { left: 345px; top: 250px; } .group:nth-child(4) { left: 80px; top: 370px; } .group:nth-child(5) { left: 400px; top: 410px; } .group:nth-child(6) { left: 470px; top: 230px; } .points { position: absolute; top: -100px; left: 50%; width: 100px; height: 48px; margin-left: -50px; background: rgba(0, 0, 0, 0.2); border: 4px solid #ffffff; border-radius: 4px; color: #fff; } #startFlag:checked ~ .points { top: 20px; } .point { display: block; height: 40px; text-align: center; font-size: 30px; font-weight: bold; cursor: default; } #startFlag { position: absolute; top: -20px; left: -20px; z-index: 999; } #startFlag:checked + #start { opacity: 0; pointer-events: none; -webkit-pointer-events: none; }
我们加了一个checkbox,然后让它绝对定位,top和left设置让它不要出现在视线内。然后我们在checked之后,让第一个场景的window透明度变为0,同时要加上这句:pointer-events: none;,这是让这个场景不要再响应点击,不然的话,再点击按钮,第一个场景又回来了。我们让第一个场景盖住第二个场景,然后在点击开始的时候,让第一个场景的透明度慢慢变为0,这样第二个场景就自动出现了。
好啦,最难的部分终于实现啦,这下可以安心啦,接下来就实现动画的部分吧!