css制作熊猫

使用CSS绘制熊猫

通过CSS的border-radius、box-shadow等属性可以绘制卡通熊猫图案。以下是一个完整的实现方案：

HTML结构

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

CSS样式

.panda {
  position: relative;
  width: 200px;
  height: 180px;
  background: white;
  border-radius: 50%;
  margin: 50px auto;
}

.ear {
  position: absolute;
  width: 60px;
  height: 60px;
  background: black;
  border-radius: 50%;
  top: -20px;
}
.ear.left { left: 20px; }
.ear.right { right: 20px; }

.face {
  position: absolute;
  width: 160px;
  height: 140px;
  background: white;
  border-radius: 50%;
  top: 40px;
  left: 20px;
}

.eye {
  position: absolute;
  width: 40px;
  height: 60px;
  background: black;
  border-radius: 50%;
  top: 30px;
}
.eye.left { left: 30px; }
.eye.right { right: 30px; }

.nose {
  position: absolute;
  width: 20px;
  height: 15px;
  background: black;
  border-radius: 50%;
  top: 70px;
  left: 70px;
}

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

进阶优化技巧

添加动画效果使熊猫更生动：

@keyframes blink {
  0%, 100% { height: 60px; }
  50% { height: 5px; }
}
.eye {
  animation: blink 3s infinite;
}

使用伪元素添加细节：

.eye::before {
  content: '';
  position: absolute;
  width: 15px;
  height: 15px;
  background: white;
  border-radius: 50%;
  top: 15px;
  left: 10px;
}

响应式调整

通过CSS变量控制大小：

:root {
  --panda-size: 200px;
}
.panda {
  width: var(--panda-size);
  height: calc(var(--panda-size) * 0.9);
}

这个方案通过纯CSS实现了可缩放、带动画效果的熊猫图案，所有尺寸均采用相对单位，便于响应式调整。