玩命牛的成长记录
登陆
2064次阅读
复选框实现按钮效果

先来看一看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，这样第二个场景就自动出现了。

好啦，最难的部分终于实现啦，这下可以安心啦，接下来就实现动画的部分吧！

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

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

友情链接：欣欣网站制作

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