当前位置：首页 > CSS

css制作熊

2026-04-01 09:08:07CSS

使用CSS绘制卡通熊

通过CSS的border-radius、box-shadow和伪元素实现熊的头部、耳朵和面部特征。以下是一个完整的示例：

css制作熊

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

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

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

.bear::before {
  left: 30px;
}

.bear::after {
  right: 30px;
}

.bear .eye {
  position: absolute;
  width: 20px;
  height: 20px;
  background: white;
  border-radius: 50%;
  top: 60px;
}

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

.bear .eye.left {
  left: 60px;
}

.bear .eye.right {
  right: 60px;
}

.bear .nose {
  position: absolute;
  width: 30px;
  height: 20px;
  background: black;
  border-radius: 50%;
  top: 90px;
  left: 85px;
}

.bear .mouth {
  position: absolute;
  width: 60px;
  height: 20px;
  border-bottom: 3px solid black;
  border-radius: 0 0 50% 50%;
  top: 110px;
  left: 70px;
}

添加动画效果

通过CSS动画让熊的耳朵微微摆动：

css制作熊

.bear::before {
  animation: left-ear 2s infinite alternate;
}

.bear::after {
  animation: right-ear 2s infinite alternate;
}

@keyframes left-ear {
  from { transform: rotate(0deg); }
  to { transform: rotate(-10deg); }
}

@keyframes right-ear {
  from { transform: rotate(0deg); }
  to { transform: rotate(10deg); }
}

响应式调整

使用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;
  }
}

阴影和细节增强

添加投影和面部高光提升立体感：

.bear {
  box-shadow: 
    0 5px 15px rgba(0,0,0,0.3),
    inset 0 -10px 20px rgba(0,0,0,0.2);
}

.bear .eye {
  box-shadow: inset 2px 2px 5px rgba(0,0,0,0.5);
}

.bear .nose {
  box-shadow: inset -2px -2px 3px rgba(255,255,255,0.2);
}

通过组合这些CSS技巧，可以创建出从简单到复杂的各种熊形象。调整颜色、形状和比例参数可以设计出不同风格的熊，如泰迪熊、北极熊或熊猫等变体。

标签: css