在前端開發中，我們經常使用 CSS 來布局、美化網頁。但是， CSS 還可以用來實現一些有趣的小游戲。比如今天要介紹的純 CSS 打地鼠游戲。

下面是游戲界面的 HTML 代碼：

<div class="container">
<div class="hole">
<div class="mole"></div>
</div>
<div class="hole">
<div class="mole"></div>
</div>
<div class="hole">
<div class="mole"></div>
</div>
<div class="hole">
<div class="mole"></div>
</div>
<div class="hole">
<div class="mole"></div>
</div>
<div class="hole">
<div class="mole"></div>
</div>
</div>

每個地洞（hole）中都有一個地鼠（mole）。

接下來是 CSS 代碼，其中使用了偽類和動畫來實現地鼠的彈出和退回：

.hole {
width: 80px;
height: 80px;
position: relative;
overflow: hidden;
}
.mole {
width: 50px;
height: 50px;
background-color: #f4a460;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
border-radius: 50%;
transition: transform .5s ease-out;
}
.mole:before {
content: '';
display: block;
width: 25px;
height: 25px;
background-color: #f4a460;
position: absolute;
top: -60%;
left: 50%;
transform: translateX(-50%);
border-radius: 50%;
transition: top .2s ease-out, opacity .2s ease-out;
}
.mole:hover:before {
top: -110%;
opacity: 0;
}
.hole:hover .mole {
bottom: 50%;
transform: translate(-50%, -100%);
}
.hole:hover .mole:not(:hover) {
transition-delay: .35s;
transform: translate(-50%, 0);
}

CSS 選擇器中的偽類和偽元素用法可能有些難懂，但是通過實際運用，我們可以更好地理解 CSS 的強大之處。

現在，我們已經完成了一個簡單的打地鼠游戲。可在瀏覽器中打開 HTML 文件，測試一下效果吧！