当前位置：首页 > CSS

css制作熊大

2026-03-12 12:52:43CSS

使用CSS绘制熊大

通过CSS的border-radius、box-shadow和伪元素等属性，可以绘制卡通形象的熊大。以下是实现步骤：

HTML结构

<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>

CSS样式

.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: #5D2E0F;
  border-radius: 50%;
  top: -15px;
}

.left-ear {
  left: 30px;
}

.right-ear {
  right: 30px;
}

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

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

.left-eye {
  left: 40px;
}

.right-eye {
  right: 40px;
}

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

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

添加动画效果

通过CSS动画让熊大更生动：

.bear {
  animation: sway 3s infinite alternate;
}

@keyframes sway {
  from { transform: rotate(-5deg); }
  to { transform: rotate(5deg); }
}

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

@keyframes blink {
  0%, 48%, 52%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.1); }
}

响应式调整

通过媒体查询适配不同屏幕：

css制作熊大

@media (max-width: 600px) {
  .bear {
    width: 150px;
    height: 135px;
  }
  .face {
    width: 112px;
    height: 90px;
    top: 38px;
    left: 19px;
  }
}

最终效果会呈现一个棕色卡通熊形象，包含耳朵、眼睛、鼻子和嘴巴等特征元素，并有轻微的摇摆和眨眼动画。颜色和尺寸可根据实际需求调整。

标签: css