就按照和欣欣讨论的思路,先写个原理验证的例子来看看:
html:
<!DOCTYPE html> <head> <meta charset="utf-8" /> <title>打地鼠</title> <link href="style.css" rel="stylesheet" /> </head> <body> <div> <label for="score1">score1</label> <label for="score2">score2</label> </div> <div class="container"> <div class="points"> <input type="radio" id="score1"/><div class="block"></div> <input type="radio" id="score2"/><div class="block"></div> </div> <div> <div class="point">0</div> <div class="point">1</div> <div class="point">2</div> </div> </div> </body>check the result
css:
.container { position : absolute; top : 100px; left : -50px; width : 100px; height : 40px; margin-left : 50%; background-color : pink; overflow : hidden; } .block { width : 100px; height : 40px; background-color : red; transition : all 0.5s linear 0s; -webkit-transition : all 0.5s linear 0s; } .point { width : 100px; height : 40px; line-height : 40px; text-align : center; font-size : 30px; color : white; background-color : blue; } .points { margin-top : -80px; } .points input[type="radio"] { opacity : 1; position : absolute; top : -1000px; left : 0px; } input[type="radio"]:checked + .block{ height : 0px; }
我们先随便放两个label,让它们指向两个radio。然后我们让.container的overflow为hidden,用points来卡住位置,下面div中的point刚刚好0在.container的位置。当我们点击label的时候,会有一个radio变为checked,然后我们让它后面的block的height变为0,这样,下一个分数就上来了。这样就简单实现了计分功能。
等等,但是我们在点击地鼠的时候,地鼠的动画效果就要去掉啊,这说明地鼠也要有一个状态区分才对,说明地鼠也要一个radio,我们再来写个例子:
html:
<!DOCTYPE html> <head> <meta charset="utf-8" /> <title>打地鼠</title> <link href="style.css" rel="stylesheet" /> </head> <body> <div class="labels"> <input type="radio" name="score1" checked/><label for="score1">score1</label> <input type="radio" name="score2" checked/><label for="score2">score2</label> </div> <div class="container"> <div class="points"> <input type="radio" name="score1" id="score1"/><div class="block"></div> <input type="radio" name="score2" id="score2"/><div class="block"></div> </div> <div> <div class="point">0</div> <div class="point">1</div> <div class="point">2</div> </div> </div> </body>check the result
css:
.container { position : absolute; top : 100px; left : -50px; width : 100px; height : 40px; margin-left : 50%; background-color : pink; overflow : hidden; } .block { width : 100px; height : 40px; background-color : red; transition : all 0.5s linear 0s; -webkit-transition : all 0.5s linear 0s; } .point { width : 100px; height : 40px; line-height : 40px; text-align : center; font-size : 30px; color : white; background-color : blue; } .points { margin-top : -80px; } .points input[type="radio"] { opacity : 1; position : absolute; top : -1000px; left : 0px; } .points input[type="radio"]:checked + .block{ height : 0px; } .labels input[type="radio"] { position : absolute; top : -1000px; left : 0px; } .labels label { display : block; width: 100px; height: 100px; margin-left : 100px; margin-top : 100px; background-color : red; border-radius : 50px; line-height : 100px; text-align : center; } .labels input[type="radio"]:checked + label { animation-name: bubble; animation-duration: 2s; animation-timing-function: linear; animation-iteration-count: infinite; -webkit-animation-name: bubble; -webkit-animation-duration: 2s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; } @keyframes bubble { 0% { background-color : blue; transform : scale(1, 1); } 10% { background-color : red; transform : scale(1.8, 1.8); } 50% { background-color : blue; transform : scale(2, 2); } 90% { background-color : red; transform : scale(1.8, 1.8); } 100% { background-color : blue; transform : scale(1, 1); } } @-webkit-keyframes bubble { 0% { background-color : blue; -webkit-transform : scale(1, 1); } 10% { background-color : red; -webkit-transform : scale(1.8, 1.8); } 50% { background-color : blue; -webkit-transform : scale(2, 2); } 90% { background-color : red; -webkit-transform : scale(1.8, 1.8); } 100% { background-color : blue; -webkit-transform : scale(1, 1); } }
我们利用同一个radio组只能有一个被选中的特点,就能很好地完成这个任务。将label前面的radio和卡位的radio的name设为一样,这样它们就在同一组,当卡位radio被checked的时候,label前面的radio就会被uncheck,这样我们就可以取消animation动画。
好了,知识点都熟悉完毕,例子也写完了,把这块功能加入打地鼠游戏吧:
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 not-button"></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"> <input type="radio" name="score1" checked/> <label for="score1" class="susliks susliks1"></label> <div class="hole"></div> </div> <div class="group"> <input type="radio" name="score2" checked/> <label for="score2" class="susliks susliks2"></label> <div class="hole"></div> </div> <div class="group"> <input type="radio" name="score3" checked/> <label for="score3" class="susliks susliks3"></label> <div class="hole"></div> </div> <div class="group"> <input type="radio" name="score4" checked/> <label for="score4" class="susliks susliks4"></label> <div class="hole"></div> </div> <div class="group"> <input type="radio" name="score5" checked/> <label for="score5" class="susliks susliks5"></label> <div class="hole"></div> </div> <div class="group"> <input type="radio" name="score6" checked/> <label for="score6" class="susliks susliks6"></label> <div class="hole"></div> </div> </div> <div class="points"> <div class="points-viewport"> <div class="points-list"> <input type="radio" name="score1" id="score1"/><div class="block"></div> <input type="radio" name="score2" id="score2"/><div class="block"></div> <input type="radio" name="score3" id="score3"/><div class="block"></div> <input type="radio" name="score4" id="score4"/><div class="block"></div> <input type="radio" name="score5" id="score5"/><div class="block"></div> <input type="radio" name="score6" id="score6"/><div class="block"></div> </div> <div> <div class="point">0</div> <div class="point">1</div> <div class="point">2</div> <div class="point">3</div> <div class="point">4</div> <div class="point">5</div> <div class="point">6</div> </div> </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; } .window .susliks { position: relative; top: 6px; left: 0; margin: 0 auto; } .susliks { position : absolute; top: 70px; left: 7px; width : 56px; height : 100px; border-radius : 20px; background : #e3c498; cursor : pointer; 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%); -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .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; } .not-button { cursor : default; } 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; -webkit-transition: 1s; transition: 1s; } #startFlag:checked ~ .time-wrapper { left: 20px; } #startFlag:checked ~ .time-wrapper .progress { -webkit-animation: progress 15s linear 0s forwards; animation: progress 15s linear 0s forwards; } @-webkit-keyframes progress { from { width: 0; background: #00ff00; } to { width: 136px; background: #ff0000; } } @keyframes progress { from { width: 0; background: #00ff00; } to { width: 136px; background: #ff0000; } } .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; } .group input[type="radio"] { position : absolute; top : -1000px; left : 0px } .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; -webkit-transition: top 1s; transition: top 1s; } #startFlag:checked ~ .points { top: 20px; } .points .points-viewport { overflow: hidden; height: 40px; width: 100%; } .points-list { margin-top : -240px; } .points-list input[type="radio"] { position : absolute; top : -1000px; left : 0px; } .points-list .block { width : 100px; height : 40px; transition : all 1s linear 0s; -webkit-transition : all 1s linear 0s; } .points-list input[type="radio"]:checked + .block{ height : 0px; } .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; } .group input[type="radio"]:checked + .susliks1 { -webkit-animation-name: susliks1; animation-name: susliks1; -webkit-animation-delay: 2s; animation-delay: 2s; -webkit-animation-duration: 10s; animation-duration: 10s; } @-webkit-keyframes susliks1 { 0% { top: 70px; } 10% { top: 0; } 15% { top: 0; } 20% { top: 70px; } 100% { top: 70px; } } @keyframes susliks1 { 0% { top: 70px; } 10% { top: 0; } 15% { top: 0; } 20% { top: 70px; } 100% { top: 70px; } } .group input[type="radio"]:checked + .susliks2 { -webkit-animation-name: susliks2; animation-name: susliks2; -webkit-animation-delay: 2s; animation-delay: 2s; -webkit-animation-duration: 10s; animation-duration: 10s; } @-webkit-keyframes susliks2 { 0% { top: 70px; } 30% { top: 70px; } 60% { top: 0; } 70% { top: 0; } 90% { top: 0; } } @keyframes susliks2 { 0% { top: 70px; } 30% { top: 70px; } 60% { top: 0; } 70% { top: 0; } 90% { top: 0; } } .group input[type="radio"]:checked + .susliks3 { -webkit-animation-name: susliks3; animation-name: susliks3; -webkit-animation-delay: 0s; animation-delay: 0s; -webkit-animation-duration: 5s; animation-duration: 5s; } @-webkit-keyframes susliks3 { 0% { top: 70px; } 30% { top: 70px; } 60% { top: 0; } 70% { top: 0; } 90% { top: 70px; } } @keyframes susliks3 { 0% { top: 70px; } 30% { top: 70px; } 60% { top: 0; } 70% { top: 0; } 90% { top: 70px; } } .group input[type="radio"]:checked + .susliks4 { -webkit-animation-name: susliks4; animation-name: susliks4; -webkit-animation-delay: 2s; animation-delay: 2s; -webkit-animation-duration: 8s; animation-duration: 8s; } @-webkit-keyframes susliks4 { 0% { top: 70px; } 10% { top: 70px; } 15% { top: 0; } 30% { top: 70px; } } @keyframes susliks4 { 0% { top: 70px; } 10% { top: 70px; } 15% { top: 0; } 30% { top: 70px; } } .group input[type="radio"]:checked + .susliks5 { -webkit-animation-name: susliks5; animation-name: susliks5; -webkit-animation-delay: 0s; animation-delay: 0s; -webkit-animation-duration: 10s; animation-duration: 10s; } @-webkit-keyframes susliks5 { 0% { top: 70px; } 70% { top: 70px; } 80% { top: 0; } 90% { top: 70px; } } @keyframes susliks5 { 0% { top: 70px; } 70% { top: 70px; } 80% { top: 0; } 90% { top: 70px; } } .group input[type="radio"]:checked + .susliks6 { -webkit-animation-name: susliks6; animation-name: susliks6; -webkit-animation-delay: 4s; animation-delay: 4s; -webkit-animation-duration: 6s; animation-duration: 6s; } @-webkit-keyframes susliks6 { 0% { top: 70px; } 70% { top: 70px; } 90% { top: 0; } 100% { top: 70px; } } @keyframes susliks6 { 0% { top: 70px; } 70% { top: 70px; } 90% { top: 0; } 100% { top: 70px; } }
这样,就差时间到后第三个场景的进入和键盘按键响应了,但是这两个我还真是没有思路啊!