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;
  }
}