**用CSS玩转打地鼠，so easy！

SEO关键词：

各位小伙伴们，今天我们来玩一个有趣的游戏——打地鼠！不过，这一次，我们不用鼠标，而是用纯CSS来实现。没错，就是用我们熟悉的CSS！

纯CSS的魅力

纯CSS打地鼠的原理很简单，我们利用了checkbox hack技术。简单来说，就是通过隐藏checkbox标签，只展示label标签。然后，我们使用for属性将checkbox和label关联起来，再利用checkbox上的CSS伪类选择器“:checked”来区分和定义各种状态。这样一来，我们就能用CSS来控制label标签的显示和隐藏，从而实现打地鼠的游戏效果。

先建个地洞

首先，我们来创建地洞。使用如下CSS代码：

.hole {
  width: 100px;
  height: 100px;
  background-color: #000;
  border: 1px solid #fff;
  border-radius: 50%;
  position: absolute;
  animation: popUp 1s infinite alternate;
}

@keyframes popUp {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0px);
  }
}

这段代码定义了一个黑色的圆形地洞，并设置了动画，让地洞上下浮动，营造出地鼠出洞的效果。

再来只地鼠

现在，我们来创建地鼠。使用如下CSS代码：

.mole {
  width: 50px;
  height: 50px;
  background-color: #ff0000;
  border: 1px solid #000;
  border-radius: 50%;
  position: absolute;
  top: -50px;
  left: calc(50% - 25px);
  transition: all 0.5s ease-in-out;
}

.mole:hover {
  transform: scale(1.2);
  cursor: pointer;
}

.mole.hide {
  top: -100px;
}

这段代码定义了一个红色的圆形地鼠，并设置了悬停效果，让地鼠在悬停时放大。我们还添加了一个“hide”类，用于控制地鼠的显示和隐藏。

把地鼠放进地洞

现在，我们需要把地鼠放进地洞里。使用如下HTML代码：

<input type="checkbox" id="mole">
<label for="mole">
  <div class="hole"></div>
  <div class="mole"></div>
</label>

这段代码创建了一个checkbox标签，并将其与一个label标签关联。label标签包含了地洞和地鼠元素。当checkbox被选中时，地鼠就会从地洞中弹出。

游戏开始

现在，我们的打地鼠游戏就完成了！当您点击地鼠时，地鼠就会消失，然后过一会儿又会重新弹出。您可以不断点击地鼠，尽情享受游戏的乐趣。

结语

用纯CSS实现打地鼠游戏是不是很简单呢？通过掌握checkbox hack技术和CSS伪类选择器，我们能够创建出各种有趣的交互式效果。如果您对CSS感兴趣，不妨尝试自己动手制作一些小游戏，享受编程的乐趣吧！