当前位置：首页 > CSS

css制作小猪

2026-02-13 00:04:30CSS

CSS绘制小猪的方法

使用纯CSS绘制小猪主要通过border-radius、box-shadow和伪元素实现。以下是关键步骤和代码示例：

基础结构

创建HTML容器，使用div元素作为小猪的主体和部件：

<div class="pig">
  <div class="ear left-ear"></div>
  <div class="ear right-ear"></div>
  <div class="eye left-eye"></div>
  <div class="eye right-eye"></div>
  <div class="snout"></div>
  <div class="nostril left-nostril"></div>
  <div class="nostril right-nostril"></div>
</div>

主体样式

设置小猪的圆形身体和粉红色背景：

.pig {
  width: 200px;
  height: 200px;
  background-color: #ffb6c1;
  border-radius: 50%;
  position: relative;
  margin: 50px auto;
}

耳朵部分

通过旋转椭圆和绝对定位实现耳朵：

.ear {
  width: 60px;
  height: 80px;
  background-color: #ff8fab;
  border-radius: 50%;
  position: absolute;
  top: -20px;
}
.left-ear {
  left: 20px;
  transform: rotate(-30deg);
}
.right-ear {
  right: 20px;
  transform: rotate(30deg);
}

眼睛与鼻孔

使用圆形和阴影增强立体感：

.eye {
  width: 20px;
  height: 30px;
  background-color: #333;
  border-radius: 50%;
  position: absolute;
  top: 70px;
}
.left-eye { left: 50px; }
.right-eye { right: 50px; }

.snout {
  width: 80px;
  height: 60px;
  background-color: #ff8fab;
  border-radius: 50%;
  position: absolute;
  bottom: 50px;
  left: 60px;
}
.nostril {
  width: 15px;
  height: 15px;
  background-color: #333;
  border-radius: 50%;
  position: absolute;
  bottom: 70px;
}
.left-nostril { left: 75px; }
.right-nostril { right: 75px; }

细节优化

添加阴影和高光增强真实感：

css制作小猪

.pig::after {
  content: "";
  width: 30px;
  height: 15px;
  background-color: white;
  border-radius: 50%;
  position: absolute;
  top: 60px;
  left: 85px;
  opacity: 0.7;
}

通过调整尺寸、颜色和定位参数，可以自定义小猪的外观。完整代码需组合以上片段，并通过浏览器调试微调位置。