css制作卡通兔子

使用CSS绘制卡通兔子

通过纯CSS和HTML可以绘制简单的卡通兔子形象，主要利用border-radius、transform和伪元素实现。以下是实现步骤和代码示例：

HTML结构

<div class="rabbit">
  <div class="head"></div>
  <div class="ear left-ear"></div>
  <div class="ear right-ear"></div>
  <div class="eye left-eye"></div>
  <div class="eye right-eye"></div>
  <div class="nose"></div>
  <div class="mouth"></div>
</div>

CSS样式

.rabbit {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 50px auto;
}

.head {
  width: 120px;
  height: 100px;
  background: #f5f5f5;
  border-radius: 50%;
  position: absolute;
  top: 50px;
  left: 40px;
}

.ear {
  width: 30px;
  height: 70px;
  background: #f5f5f5;
  border-radius: 50%;
  position: absolute;
}

.left-ear {
  transform: rotate(-30deg);
  top: 10px;
  left: 50px;
}

.right-ear {
  transform: rotate(30deg);
  top: 10px;
  right: 50px;
}

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

.left-eye {
  left: 70px;
}

.right-eye {
  right: 70px;
}

.nose {
  width: 10px;
  height: 10px;
  background: pink;
  border-radius: 50%;
  position: absolute;
  top: 95px;
  left: 95px;
}

.mouth {
  width: 30px;
  height: 10px;
  border-bottom: 2px solid #333;
  border-radius: 0 0 50% 50%;
  position: absolute;
  top: 105px;
  left: 85px;
}

进阶效果优化

为增加立体感，可通过添加阴影和渐变：

.head {
  box-shadow: inset -5px -5px 10px rgba(0,0,0,0.1);
  background: linear-gradient(to bottom, #f5f5f5, #e0e0e0);
}

.ear::after {
  content: '';
  width: 20px;
  height: 50px;
  background: pink;
  border-radius: 50%;
  position: absolute;
  bottom: 5px;
  left: 5px;
}

动画效果

添加眨眼动画：

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

.eye {
  animation: blink 3s infinite;
}

响应式调整

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

@media (max-width: 600px) {
  .rabbit {
    transform: scale(0.7);
  }
}

最终效果会呈现一个带有耳朵、眼睛、鼻子和嘴巴的简约卡通兔子，可通过调整颜色、尺寸和位置参数实现不同风格。