css制作熊大

2026-04-02 08:45:09CSS

使用CSS绘制熊大

通过CSS的div元素和样式属性可以绘制简单的熊大形象。以下是一个基础的实现方法：

css制作熊大

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

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

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

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

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

添加面部特征

为熊大添加眼睛、鼻子和嘴巴：

css制作熊大

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

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

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

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

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

完善耳朵部分

添加熊大的耳朵使其更形象：

.bear .ear {
  position: absolute;
  width: 40px;
  height: 40px;
  background-color: #8B4513;
  border-radius: 50%;
  top: 10px;
}

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

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

最终效果整合

将所有元素组合起来：

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

通过调整CSS中的尺寸、颜色和位置参数，可以进一步优化熊大的外观。这种方法利用了CSS的基本形状和定位技术，适合创建简单的卡通形象。

标签: css