css制作小猪

使用CSS绘制小猪

通过CSS的border-radius、box-shadow等属性可以绘制卡通小猪形象，以下是实现代码和分步说明：

<div class="pig">
  <div class="head"></div>
  <div class="ear left"></div>
  <div class="ear right"></div>
  <div class="eye left"></div>
  <div class="eye right"></div>
  <div class="nose"></div>
  <div class="nostril left"></div>
  <div class="nostril right"></div>
</div>

/* 基础容器 */
.pig {
  position: relative;
  width: 200px;
  height: 180px;
  margin: 50px auto;
}

/* 头部 */
.head {
  width: 160px;
  height: 140px;
  background: pink;
  border-radius: 50%;
  position: absolute;
  top: 20px;
  left: 20px;
}

/* 耳朵 */
.ear {
  width: 50px;
  height: 70px;
  background: #ffb6c1;
  border-radius: 50% 50% 0 0;
  position: absolute;
}
.ear.left {
  transform: rotate(-30deg);
  left: 5px;
  top: 0;
}
.ear.right {
  transform: rotate(30deg);
  right: 5px;
  top: 0;
}

/* 眼睛 */
.eye {
  width: 20px;
  height: 20px;
  background: #333;
  border-radius: 50%;
  position: absolute;
  top: 60px;
}
.eye.left { left: 60px; }
.eye.right { right: 60px; }

/* 鼻子 */
.nose {
  width: 60px;
  height: 40px;
  background: #ff8da1;
  border-radius: 50%;
  position: absolute;
  bottom: 40px;
  left: 50px;
}

/* 鼻孔 */
.nostril {
  width: 12px;
  height: 12px;
  background: #333;
  border-radius: 50%;
  position: absolute;
  bottom: 50px;
}
.nostril.left { left: 70px; }
.nostril.right { right: 70px; }

关键实现技巧

• 圆形结构使用border-radius: 50%实现
• 耳朵通过transform: rotate()调整角度
• 绝对定位(position: absolute)实现部件叠加
• 颜色使用粉色系(pink, #ffb6c1)增强卡通感

效果优化建议

• 添加box-shadow增加立体感
• 使用CSS动画实现眨眼效果
• 增加身体部分完善造型
• 响应式调整尺寸适配不同屏幕

完整代码可直接复制到HTML文件中运行查看效果，如需交互效果可进一步添加:hover伪类实现动态响应。