CSS做打地鼠游戲是一種很有趣的前端應用，主要利用CSS的動畫效果來模擬打地鼠的過程。以下是一個簡單的示例：

/* HTML 結構 */
<div class="container">
<div id="box"></div>
<div id="mole"></div>
</div>
/* CSS 樣式 */
.container {
position: relative;
width: 200px;
height: 200px;
overflow: hidden;
background: #d8d8d8;
}
#box {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('box.png') no-repeat;
}
#mole {
position: absolute;
top: 150px;
left: 50px;
width: 50px;
height: 50px;
background: url('mole.png') no-repeat;
animation: down 1s ease-in-out, up 1s ease-in-out 1s infinite;
}
@keyframes down {
from { top: -50px; }
to { top: 150px; }
}
@keyframes up {
from { top: 150px; }
to { top: -50px; }
}

在這段代碼中，我們首先定義了一個容器，里面有一個地圖和一個地鼠。通過設置容器的overflow: hidden屬性，我們可以將地圖視為視口，并且只顯示視口內的元素。

接下來我們定義了一個地鼠，包括它的位置、大小和背景圖像。我們使用了CSS動畫效果來模擬地鼠的上下運動。在上述代碼中，我們定義了兩個關鍵幀(down和up)，下降效果在1秒內完成（ease-in-out表示緩入緩出），上升效果在1秒后開始，無限重復運動。

此外，為了讓游戲更加具有趣味性，我們可以為地鼠添加click事件，當用戶點擊地鼠時，觸發事件，讓地鼠消失（display: none;）。

這就是使用CSS制作打地鼠游戲的基本方法，通過掌握CSS的動畫效果，我們可以為游戲添加更多有趣的元素，讓用戶體驗更加豐富。