css制作开心农场

2026-01-28 16:08:34CSS

使用CSS制作开心农场

使用CSS可以创建一个简单的开心农场界面，主要涉及布局、动画和视觉效果。以下是一些关键方法和技巧：

HTML结构

<div class="farm">
  <div class="field"></div>
  <div class="crop"></div>
  <div class="animal cow"></div>
  <div class="animal chicken"></div>
</div>

基础农场布局

css制作开心农场

.farm {
  width: 500px;
  height: 400px;
  background-color: #8bc34a;
  position: relative;
  border: 10px solid #5d4037;
}

.field {
  width: 300px;
  height: 200px;
  background-color: #4caf50;
  position: absolute;
  bottom: 20px;
  left: 100px;
}

作物样式

.crop {
  width: 30px;
  height: 50px;
  background-color: #388e3c;
  position: absolute;
  bottom: 220px;
  left: 200px;
  border-radius: 5px;
}

.crop::after {
  content: "";
  width: 40px;
  height: 20px;
  background-color: #81c784;
  position: absolute;
  top: -10px;
  left: -5px;
  border-radius: 50%;
}

动物动画

css制作开心农场

.animal {
  position: absolute;
  bottom: 20px;
  animation: move 5s infinite;
}

.cow {
  width: 60px;
  height: 40px;
  background-color: #795548;
  border-radius: 20px;
  left: 50px;
}

.chicken {
  width: 30px;
  height: 30px;
  background-color: #fff;
  border-radius: 50%;
  left: 400px;
}

@keyframes move {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(50px); }
}

添加天气效果

.farm::before {
  content: "";
  width: 50px;
  height: 50px;
  background-color: #bbdefb;
  border-radius: 50%;
  position: absolute;
  top: 50px;
  left: 200px;
  animation: float 8s infinite;
}

@keyframes float {
  0% { transform: translate(0, 0); }
  50% { transform: translate(100px, 20px); }
  100% { transform: translate(0, 0); }
}

昼夜交替效果

.farm {
  transition: background-color 5s;
}

.farm:hover {
  background-color: #0d47a1;
}

.farm:hover::after {
  content: "";
  width: 40px;
  height: 40px;
  background-color: #ffeb3b;
  position: absolute;
  top: 30px;
  right: 30px;
  border-radius: 50%;
}

这些CSS技巧可以组合使用来创建一个动态的开心农场界面。通过调整尺寸、颜色和动画参数，可以创建更丰富的农场场景。