当前位置：首页 > CSS

css制作熊

2026-01-28 06:21:56CSS

使用CSS绘制卡通熊

通过纯CSS可以绘制简单的卡通熊形象，主要利用border-radius、box-shadow和伪元素实现。以下是关键代码示例：

css制作熊

<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="snout"></div>
    <div class="nose"></div>
  </div>
</div>

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

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

.left-ear {
  top: -10px;
  left: 20px;
}

.right-ear {
  top: -10px;
  right: 20px;
}

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

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

.left-eye {
  left: 40px;
}

.right-eye {
  right: 40px;
}

.snout {
  position: absolute;
  width: 80px;
  height: 60px;
  background: #F5DEB3;
  border-radius: 50%;
  bottom: 20px;
  left: 35px;
}

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

动画效果增强

添加简单的呼吸动画效果：

.bear {
  animation: breathe 2s infinite alternate;
}

@keyframes breathe {
  from { transform: scale(0.98); }
  to { transform: scale(1.02); }
}

响应式调整

通过CSS变量控制大小：

:root {
  --bear-size: 200px;
}

.bear {
  width: var(--bear-size);
  height: calc(var(--bear-size) * 0.9);
}

@media (max-width: 600px) {
  :root {
    --bear-size: 150px;
  }
}