css制作熊

2026-02-13 00:46:04CSS

使用CSS绘制卡通熊

可以通过CSS的border-radius、box-shadow和伪元素等特性组合绘制简单的卡通熊形象。以下是一个实现方案：

<div class="bear">
  <div class="ear left-ear"></div>
  <div class="ear right-ear"></div>
  <div class="face">
    <div class="eye left-eye"></div>
    <div class="eye right-eye"></div>
    <div class="nose"></div>
    <div class="mouth"></div>
  </div>
</div>

.bear {
  position: relative;
  width: 200px;
  height: 180px;
  background: #8B4513;
  border-radius: 50% 50% 45% 45%;
  margin: 50px auto;
}

.ear {
  position: absolute;
  width: 60px;
  height: 60px;
  background: #5D4037;
  border-radius: 50%;
  top: -20px;
}

.left-ear {
  left: 20px;
}

.right-ear {
  right: 20px;
}

.face {
  position: absolute;
  width: 150px;
  height: 120px;
  background: #D2B48C;
  border-radius: 50%;
  top: 50px;
  left: 25px;
}

.eye {
  position: absolute;
  width: 25px;
  height: 25px;
  background: #000;
  border-radius: 50%;
  top: 40px;
}

.left-eye {
  left: 35px;
}

.right-eye {
  right: 35px;
}

.nose {
  position: absolute;
  width: 30px;
  height: 20px;
  background: #000;
  border-radius: 50%;
  top: 70px;
  left: 60px;
}

.mouth {
  position: absolute;
  width: 60px;
  height: 20px;
  border-bottom: 3px solid #000;
  border-radius: 0 0 50% 50%;
  top: 90px;
  left: 45px;
}

进阶优化技巧

添加动画效果让熊更生动：

.bear:hover {
  transform: rotate(-5deg);
  transition: transform 0.3s ease;
}

.eye::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  background: white;
  border-radius: 50%;
  top: 5px;
  left: 5px;
}

使用CSS变量方便调整颜色：

:root {
  --fur-color: #8B4513;
  --face-color: #D2B48C;
  --ear-color: #5D4037;
}

.bear { background: var(--fur-color); }
.ear { background: var(--ear-color); }
.face { background: var(--face-color); }

纯CSS单元素实现方案

通过伪元素减少HTML结构：

<div class="minimal-bear"></div>

.minimal-bear {
  position: relative;
  width: 200px;
  height: 180px;
  background: #8B4513;
  border-radius: 50% 50% 45% 45%;
  margin: 100px auto;
}

.minimal-bear::before,
.minimal-bear::after {
  content: '';
  position: absolute;
  width: 60px;
  height: 60px;
  background: #5D4037;
  border-radius: 50%;
  top: -20px;
}

.minimal-bear::before { left: 20px; }
.minimal-bear::after { right: 20px; }

这种方法适合简单图形，复杂细节建议使用多元素结构。

css制作熊