玩命牛的成长记录-纯CSS画地鼠

3461次阅读

纯CSS画地鼠

仔细分析分析这个游戏，其实最难的就是地鼠和绿色油漆桶的绘制了，绿色油漆桶看上去还简单些，那就先来解决它吧：

html：

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>打地鼠</title>
<link href="style.css" rel="stylesheet" />
</head>
<body>
  <div class="container">
    <div class="hole"></div>
  </div>
</body>

check the result

css：

.container {
  position : absolute;
  left : 50%;
  top : 50%;
  width : 600px;
  height : 600px;
  margin-left : -300px;
  margin-top : -300px;
  border : 1px solid black;
  overflow : hidden;
}
.hole {
  position : absolute;
  left : 30px;
  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%);
}

基本上都是我们学过的，只是background-image的linear用了百分比，来指定在某个百分比的地方的颜色，从而实现更精确的渐变控制。注意，在这里-webkit-linear-gradient是left，而linear-gradient是to right，其他方向也是类似。而在before中，background-image用了3个渐变叠加，这也是多重背景的应用。Linear中，可以指定百分比，也可以指定像素，这里用像素实现了before顶部和底部的高光效果。

然后就是地鼠的绘制了，来看看：

html：

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>打地鼠</title>
<link href="style.css" rel="stylesheet" />
</head>
<body>
  <div class="container">
    <div class="susliks"></div>
  </div>
</body>

check the result

css：

.container {
  position : absolute;
  left : 50%;
  top : 50%;
  width : 600px;
  height : 600px;
  margin-left : -300px;
  margin-top : -300px;
  border : 1px solid black;
  overflow : hidden;
}
.susliks {
  position : absolute;
  left : 30px;
  top : 70px;
  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;
}

地鼠的绘制利用了多重背景的特性，主体给一个border-radius，然后就利用多重背景来绘制眼睛和鼻子了。每一个圆圈都是一个径向渐变，径向渐变的第一个参数，之前我们用的是类似top这种，这里我们精确指定像素，第三个参数和第四个参数，我们也指定渐变半径的大小，这里用的是百分比，半径之内的绘制颜色，半径之外的透明，这样就完成了圆圈的绘制。两个耳朵的绘制就用before和after就行啦，手段都是一样的。

好了，让我们来画一下三个场景吧！

先来看看第一个场景，是游戏开始时的场景：

html：

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>打地鼠</title>
<link href="style.css" rel="stylesheet" />
</head>
<body>
  <div class="container">
    <h1>打呀打地鼠</h1>
    <p>不许笑，一个严肃的 CSS 游戏</p>
    <div class="btn-group">
      <div class="susliks"></div>
      <div class="start">开始</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-color : black;
}
.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;
}
.start {
  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;
}

其他的样式对我们来说应该很简单，这里主要注意两点。第一、我们把.susliks的position由absolute改为了relative，因为relative可以用margin: 0px auto来左右居中，而absolute不行，原因也很简单，relative的元素还是占有原来的位置，所以设置margin还是能生效，而absolute则完全没有原来的位置了，故设置margin也就不生效啦。第二、box-sizing，我们设置了border-box，和普通的盒子模型有什么不同呢？普通盒子模型设置width和height，是不会包含border的，所以我们还要另算border，有时候很麻烦，所以我们可以设置box-sizing: border-box;，这样的话width和height就把border包含进去了。

第二个场景的话还有一个麻烦事儿，那就是绿色的深浅相交的草地，

html：

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>打地鼠</title>
<link href="style.css" rel="stylesheet" />
</head>
<body>
  <div class="container">
    <div class="time-wrapper">
      <p>游戏时间：</p>
      <div class="time">
        <div class="progress"></div>
      </div>
    </div>
    <div class="mapGroup">
      <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%);
}
.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;
}
.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: 20px;
  top: 20px;
}
.time-wrapper p {
  color: #fff;
  line-height: 24px;
}
.time {
  border: 2px solid #fff;
  width: 140px;
  height: 20px;
}
.time .progress {
  height: 16px;
  width: 0;
}
.mapGroup  {
  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: 20px;
  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;
}
.point {
  display: block;
  height: 40px;
  text-align: center;
  font-size: 30px;
  font-weight: bold;
  cursor: default;
}

其实草地的效果很明显是用了3D转换，就是一个div绕x轴旋转了45度，而深浅相交的div正是用了nth-child选择器。其实技术说破了都很简单，但是在一开始能够想到还是不简单的。其他的东西对我们来说应该很简单了，就是用绝对定位来放好位置就行。注意，这里使用了3D转换，360和ie请注意测试，在我这里360是没有效果的。

第三个场景和第一个场景类似，都不是很麻烦：

html：

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>打地鼠</title>
<link href="style.css" rel="stylesheet" />
</head>
<body>
  <div class="container">
    <div class="end">
      <h2>Game Over</h2>
      <p>壮士欢迎从头再来</p>
      <p class="meta">按 F5/Command R 重来</p>
      <div class="susliks"></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-color : black;
}
.susliks {
  position : absolute;
  left : 50%;
  bottom: -54px;
  margin-left: -28px;
  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;
}
h2, p {
  color: #fff;
  text-align: center;
}
h2 {
  margin-top: 100px;
  margin-bottom: 10px;
}
.meta {
  margin-top: 50px;
  opacity: 0.6;
}
.end {
  top: -800px;
  opacity: 1;
  display: block;
  border-bottom: 2px solid #fff;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;  
}

用绝对定位把地鼠调整到合适的位置就好了。

样式都做好了，但是实在是不知道怎么响应鼠标的点击事件啊，明天去请教下欣欣好了！

如果您觉得此教程不错，想支持一下，您可以通过支付宝扫码给我们一点赞助

，不要超过100元哦！

评论请先登录