css制作开心农场
CSS制作开心农场游戏
开心农场游戏的核心在于用CSS实现作物生长、土地格子、交互效果等视觉元素。以下是关键实现方法：
土地格子布局 使用Grid或Flex布局创建农场土地网格，每块土地用方形div表示：
.farm {
display: grid;
grid-template-columns: repeat(5, 80px);
grid-gap: 10px;
}
.plot {
width: 80px;
height: 80px;
background: #8B4513;
border: 2px ridge #A0522D;
position: relative;
}作物生长动画 通过CSS关键帧动画实现作物生长阶段变化：
@keyframes grow {
0% { height: 0; opacity: 0; }
30% { height: 20px; opacity: 1; }
70% { height: 50px; }
100% { height: 80px; }
}
.crop {
animation: grow 3s linear forwards;
background: url('crop-stages.png') 0 0;
}悬停交互效果 为土地添加悬停和点击反馈：
.plot:hover {
box-shadow: 0 0 10px gold;
}
.plot:active {
transform: scale(0.95);
}
.harvestable::after {
content: "✔";
color: green;
position: absolute;
right: 5px;
top: 5px;
}道具工具栏样式 使用Flex布局创建底部工具栏：
.toolbar {
display: flex;
justify-content: center;
gap: 15px;
padding: 10px;
background: #4CAF50;
}
.tool {
width: 50px;
height: 50px;
border-radius: 50%;
background: white;
cursor: pointer;
transition: all 0.2s;
}
.tool:hover {
transform: translateY(-5px);
}响应式设计 添加媒体查询适应不同屏幕：
@media (max-width: 600px) {
.farm {
grid-template-columns: repeat(3, 70px);
}
.plot {
width: 70px;
height: 70px;
}
}进阶技巧
伪元素装饰 使用::before/::after添加农场装饰元素：
.farm::before {
content: "";
position: absolute;
top: -30px;
left: 0;
width: 100%;
height: 30px;
background: url('fence.png') repeat-x;
}昼夜切换效果 通过父级类名控制昼夜主题：
.farm.night {
background: #0a1128;
filter: brightness(0.6);
}
.farm.night .plot {
box-shadow: 0 0 5px #fff8e7;
}3D土地效果 使用transform增强立体感：
.plot {
transform-style: preserve-3d;
transform: rotateX(5deg);
box-shadow: inset 0 -10px 20px rgba(0,0,0,0.3);
}实现完整农场游戏还需配合JavaScript处理种植、收获等逻辑，但CSS能提供所有视觉表现和基础交互反馈。关键是要建立清晰的状态类名体系（如.empty、.planted、.grown），通过类名切换触发不同CSS样式。
