熊的制作css

2026-01-28 12:20:29CSS

使用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-color: #8B4513;
  border-radius: 50% 50% 45% 45%;
  margin: 50px auto;
}

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

.left-ear {
  left: 20px;
}

.right-ear {
  right: 20px;
}

.face {
  position: absolute;
  width: 140px;
  height: 120px;
  background-color: #A1887F;
  border-radius: 50%;
  top: 40px;
  left: 30px;
}

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

.left-eye {
  left: 35px;
}

.right-eye {
  right: 35px;
}

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

.mouth {
  position: absolute;
  width: 40px;
  height: 10px;
  border-bottom: 2px solid #000;
  border-radius: 0 0 50% 50%;
  top: 80px;
  left: 50px;
}

添加动画效果

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

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

@keyframes breathe {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.05);
  }
}

响应式调整

通过媒体查询使熊的尺寸适应不同屏幕：

@media (max-width: 600px) {
  .bear {
    width: 150px;
    height: 135px;
  }

  .face {
    width: 105px;
    height: 90px;
    left: 22.5px;
  }
}

进阶技巧

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

熊的制作css

:root {
  --bear-color: #8B4513;
  --ear-color: #5D4037;
  --face-color: #A1887F;
}

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

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

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

这个实现通过多个圆形和椭圆形的组合构建了基本的熊形象，可根据需要调整颜色、尺寸或添加更多细节。

标签: css