CSS是一種可以讓我們在網(wǎng)站中實現(xiàn)各種有趣功能的語言。其中一個很有趣的功能就是打地鼠游戲。在這個游戲中，我們可以通過CSS來控制地鼠的出現(xiàn)和消失，同時還可以通過JavaScript來控制用戶的得分。

要實現(xiàn)這個功能，我們需要通過CSS來控制地鼠的樣式和位置。具體來說，我們可以使用position屬性來設置地鼠的位置，同時使用display屬性來控制地鼠的出現(xiàn)和消失。例如，下面的CSS代碼可以讓地鼠在屏幕上隨機出現(xiàn)和消失：

.mole{
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: all 0.5s ease-out;
}
.mole.active{
opacity: 1;
}

在上面的CSS代碼中，我們使用了一個.mole類來描述地鼠的樣式。首先，我們把地鼠的位置設置為absolute，這樣就可以精確地控制它的位置。然后，我們設置了地鼠的初始opacity屬性為0，這樣它的初始狀態(tài)是隱藏的。

接下來，我們定義了一個.active類來控制地鼠的出現(xiàn)。當我們添加.active類到.mole元素上時，它的opacity屬性就會變成1，這樣地鼠就會出現(xiàn)在屏幕上。

要讓地鼠隨機出現(xiàn)，我們可以通過JavaScript來控制.mole元素的.active類的添加和移除。例如，下面的JavaScript代碼可以讓地鼠在屏幕上隨機出現(xiàn)和消失：

function showRandomMole(){
let moles = document.querySelectorAll('.mole');
let moleIndex = Math.floor(Math.random()*moles.length);
let mole = moles[moleIndex];
if(mole.classList.contains('active')){
setTimeout(showRandomMole, 500);
}else{
mole.classList.add('active');
setTimeout(function(){
mole.classList.remove('active');
showRandomMole();
}, 1000);
}
}

在上面的JavaScript代碼中，我們首先獲取了所有的.mole元素，然后隨機選擇一個元素并添加.active類。如果該元素已經(jīng)有了.active類，那么我們就需要等待一段時間后再隨機選擇元素并添加.active類。如果新選擇的元素沒有.active類，那么我們就需要等待一段時間后再移除.active類，然后重新調用showRandomMole函數(shù)以選擇下一個需要出現(xiàn)的地鼠。

有了以上的CSS和JavaScript代碼，我們就可以實現(xiàn)一個簡單的打地鼠游戲了。當用戶點擊出現(xiàn)的地鼠時，我們可以通過JavaScript控制用戶的得分，并且可以通過CSS來顯示用戶的得分。