制作一个简单的“打地鼠”游戏通常涉及HTML、CSS以及JavaScript。不过，如果只使用CSS，我们可以创建一个基本的布局，但它将缺乏交互性。以下是一个用CSS创建的基本“打地鼠”游戏布局示例：

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>打地鼠游戏</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="game-area">
        <div class="mole"></div>
        <div class="mole"></div>
        <div class="mole"></div>
        <!-- 更多地鼠 -->
    </div>
</body>
</html>

**CSS**

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f0f0f0;
}

.game-area {
    width: 300px;
    height: 300px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.mole {
    width: 100%;
    height: 100px;
    background-color: brown;
    border-radius: 50%;
    margin: 5px;
}

这个示例创建了一个简单的游戏区域，其中包含多个圆形的“地鼠”元素。这里使用了CSS Grid来布局这些元素。

请注意，这个示例只展示了如何用HTML和CSS创建静态布局。为了制作一个完整的、可交互的“打地鼠”游戏，你还需要使用JavaScript来处理地鼠的随机出现、玩家点击事件以及得分系统等。由于CSS本身不支持这种类型的交互逻辑，你需要结合JavaScript来实现这个游戏的完整功能。

版权属于：泽泽社长
本文链接：https://blog.zezeshe.com/archives/groundhog-css.html
本站未注明转载的文章均为原创，并采用 CC BY-NC-SA 4.0 授权协议，转载请注明来源，谢谢！