css制作草莓熊

使用CSS绘制草莓熊

通过CSS的clip-path和渐变属性可以创建一个简单的草莓熊形象。以下是实现代码：

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

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

.strawberry-bear::before {
  content: '';
  position: absolute;
  width: 60px;
  height: 40px;
  background: #ff8fa3;
  border-radius: 50%;
  top: 50px;
  left: 40px;
  box-shadow: 80px 0 #ff8fa3;
}

.strawberry-bear::after {
  content: '';
  position: absolute;
  width: 30px;
  height: 20px;
  background: #333;
  border-radius: 50%;
  top: 60px;
  left: 50px;
  box-shadow: 80px 0 #333;
}

添加草莓纹理效果

使用径向渐变模拟草莓的种子纹理：

.strawberry-bear {
  background: 
    radial-gradient(circle at 30% 30%, #ff8fa3 5%, transparent 5%),
    radial-gradient(circle at 70% 30%, #ff8fa3 5%, transparent 5%),
    radial-gradient(circle at 50% 60%, #ff8fa3 5%, transparent 5%),
    #ff6b88;
  background-size: 40px 40px;
}

耳朵和面部细节

添加耳朵和鼻子等细节元素：

.strawberry-bear::before {
  /* 原有眼睛代码 */
}

.strawberry-bear::after {
  /* 耳朵 */
  width: 50px;
  height: 50px;
  background: #ff6b88;
  border-radius: 50%;
  top: -20px;
  left: 20px;
  box-shadow: 110px 0 #ff6b88;
}

.nose {
  position: absolute;
  width: 20px;
  height: 15px;
  background: #333;
  border-radius: 50%;
  top: 80px;
  left: 90px;
}

动画效果

添加简单的呼吸动画：

@keyframes breathe {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.strawberry-bear {
  animation: breathe 2s infinite ease-in-out;
}

响应式调整

通过媒体查询确保在不同设备上的显示效果：

@media (max-width: 600px) {
  .strawberry-bear {
    width: 150px;
    height: 135px;
  }
}

这个实现使用了纯CSS创建了一个简化版的草莓熊形象，包含基本形状、纹理和简单动画。可以根据需要调整颜色、尺寸和细节来获得更精确的效果。