玩命牛的成长记录
登陆
2159次阅读
计分效果实现

就按照和欣欣讨论的思路，先写个原理验证的例子来看看：

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;
  }
}

这样，就差时间到后第三个场景的进入和键盘按键响应了，但是这两个我还真是没有思路啊！

如果您觉得此教程不错，想支持一下，您可以通过支付宝扫码给我们一点，不要超过100元哦！
评论请先登录

联系人：李先生     联系电话：13581641192     电子邮件：channingbreeze@163.com     QQ：396417401     微信号：xin874058

友情链接：欣欣网站制作

Copyright © 2015 calfnote.com All Rights Reserved | 京ICP备15008048号-1