当前位置：首页 > CSS

css制作开心庄园

2026-01-28 14:30:56CSS

使用CSS制作开心庄园风格页面

创建开心庄园风格的CSS设计，可以结合自然色调、圆角元素和手绘风格图标。以下是一些关键CSS代码片段和设计思路：

基础样式设置

body {
  background-color: #f0f7e6;
  font-family: 'Comic Sans MS', cursive, sans-serif;
  color: #5a7247;
}

按钮样式

css制作开心庄园

.farm-button {
  background-color: #8db580;
  border-radius: 20px;
  padding: 10px 20px;
  border: none;
  box-shadow: 0 4px 0 #6a8f5d;
  color: white;
  text-transform: uppercase;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s;
}

.farm-button:hover {
  background-color: #7ca572;
  transform: translateY(2px);
  box-shadow: 0 2px 0 #6a8f5d;
}

卡片设计

.farm-card {
  background: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  border: 2px solid #d4e8c8;
  max-width: 300px;
}

动画效果

css制作开心庄园

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.animated-icon {
  animation: bounce 2s infinite;
}

植物元素样式

.plant {
  width: 100px;
  height: 100px;
  background-color: #7dbd6b;
  border-radius: 50% 50% 40% 40%;
  position: relative;
}

.plant:after {
  content: "";
  position: absolute;
  width: 20px;
  height: 40px;
  background-color: #5a7247;
  left: 40px;
  top: -40px;
  border-radius: 10px;
}

布局技巧

.farm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
  padding: 20px;
}

.farm-header {
  background: linear-gradient(to right, #8db580, #b5d3a7);
  padding: 20px;
  text-align: center;
  color: white;
  border-bottom: 5px solid #6a8f5d;
}

字体选择

@import url('https://fonts.googleapis.com/css2?family=Gochi+Hand&display=swap');

.farm-title {
  font-family: 'Gochi Hand', cursive;
  font-size: 2.5rem;
  text-shadow: 2px 2px 0px rgba(0,0,0,0.1);
}

这些CSS代码片段可以帮助创建开心庄园风格的网页元素。可以根据需要调整颜色、尺寸和动画效果来匹配特定的设计需求。