当前位置：首页 > CSS

css制作熊猫

2026-01-28 07:07:44CSS

CSS绘制熊猫的方法

使用CSS绘制熊猫主要涉及HTML结构和CSS样式的结合，通过圆形、椭圆形等基本形状组合出熊猫的各个部分。以下是具体实现步骤：

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: 300px;
  height: 300px;
  background-color: white;
  border-radius: 50%;
  margin: 50px auto;
}

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

.ear.left {
  left: 40px;
}

.ear.right {
  right: 40px;
}

.face {
  position: relative;
  width: 250px;
  height: 220px;
  margin: 60px auto 0;
}

.eye {
  position: absolute;
  width: 70px;
  height: 100px;
  background-color: black;
  border-radius: 50%;
  top: 40px;
}

.eye.left {
  left: 30px;
}

.eye.right {
  right: 30px;
}

.nose {
  position: absolute;
  width: 40px;
  height: 30px;
  background-color: black;
  border-radius: 50%;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
}

.mouth {
  position: absolute;
  width: 100px;
  height: 40px;
  border-bottom: 4px solid black;
  border-radius: 0 0 50px 50px;
  top: 140px;
  left: 50%;
  transform: translateX(-50%);
}

进阶优化技巧

为熊猫添加更多细节可以使其更生动。在原有基础上增加眼白和眼球部分：

<div class="eye left">
  <div class="eye-white"></div>
  <div class="eye-ball"></div>
</div>
<div class="eye right">
  <div class="eye-white"></div>
  <div class="eye-ball"></div>
</div>

对应CSS：

.eye-white {
  position: absolute;
  width: 30px;
  height: 50px;
  background-color: white;
  border-radius: 50%;
  top: 25px;
  left: 20px;
}

.eye-ball {
  position: absolute;
  width: 15px;
  height: 20px;
  background-color: black;
  border-radius: 50%;
  top: 35px;
  left: 27px;
}

动画效果实现

为熊猫添加简单的眨眼动画：

@keyframes blink {
  0%, 100% { height: 100px; }
  50% { height: 10px; }
}

.eye {
  animation: blink 3s infinite;
}

响应式调整

确保熊猫在不同屏幕尺寸下保持比例：

@media (max-width: 600px) {
  .panda {
    width: 200px;
    height: 200px;
  }

  .ear {
    width: 50px;
    height: 50px;
  }

  .face {
    width: 180px;
    height: 150px;
  }

  .eye {
    width: 50px;
    height: 70px;
  }
}

通过以上CSS代码组合，可以创建一个具有基本特征的熊猫形象，并通过添加细节和动画使其更加生动。实际应用中可以根据需要调整尺寸、颜色和动画效果。

css制作熊猫