css制作开心庄园
使用CSS制作开心庄园风格页面
通过CSS可以创建类似开心庄园的农场或庄园风格界面，主要涉及布局、动画和视觉效果。以下是关键实现方法：
基础布局结构 HTML部分需包含地块、植物、装饰物等元素容器：
<div class="farm">
<div class="plot"></div>
<div class="crop growing"></div>
<div class="decoration tree"></div>
</div>地块样式设计 使用网格布局创建整齐的种植区域：
.farm {
display: grid;
grid-template-columns: repeat(5, 80px);
gap: 10px;
background: #8bc34a;
padding: 20px;
border-radius: 15px;
}
.plot {
width: 80px;
height: 80px;
background: #5d4037;
border-radius: 5px;
cursor: pointer;
}植物生长动画 通过关键帧实现作物生长效果：
.crop {
width: 30px;
height: 30px;
background: #4caf50;
border-radius: 50%;
position: relative;
top: 25px;
left: 25px;
}
.growing {
animation: grow 3s forwards;
}
@keyframes grow {
0% { transform: scale(0.2); opacity: 0; }
50% { transform: scale(1.1); }
100% { transform: scale(1); opacity: 1; }
}装饰元素样式 添加树木、围栏等装饰物：
.tree {
width: 40px;
height: 80px;
background: linear-gradient(to bottom, #8bc34a 60%, #5d4037 40%);
position: relative;
}
.tree::after {
content: "";
position: absolute;
width: 20px;
height: 20px;
background: #795548;
bottom: -10px;
left: 10px;
}交互效果增强 添加悬停和点击反馈：
.plot:hover {
box-shadow: 0 0 10px #ffeb3b;
}
.crop:active {
transform: scale(0.9);
}响应式适配 确保在不同设备上正常显示：
@media (max-width: 600px) {
.farm {
grid-template-columns: repeat(3, 60px);
}
.plot {
width: 60px;
height: 60px;
}
}
