css制作卡通兔子

使用CSS绘制卡通兔子

通过CSS的border-radius、box-shadow和伪元素等特性，可以创建简单的卡通兔子形象。以下是实现步骤和代码示例：

HTML结构

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

CSS样式

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

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

.ear {
  position: absolute;
  width: 30px;
  height: 80px;
  background: #f5f5f5;
  border-radius: 50% 50% 0 0;
  z-index: 1;
}

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

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

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

.eye.left {
  left: 30px;
}

.eye.right {
  right: 30px;
}

.mouth {
  position: absolute;
  width: 20px;
  height: 10px;
  background: #ff9999;
  border-radius: 0 0 10px 10px;
  bottom: 20px;
  left: 50px;
}

.body {
  position: absolute;
  width: 140px;
  height: 120px;
  background: #f5f5f5;
  border-radius: 50%;
  bottom: 0;
  left: 30px;
}

添加动画效果

通过CSS动画让兔子耳朵摆动：

@keyframes ear-wiggle {
  0%, 100% { transform: rotate(-30deg); }
  50% { transform: rotate(-20deg); }
}

.ear.left {
  animation: ear-wiggle 1s infinite alternate;
}

@keyframes ear-wiggle-right {
  0%, 100% { transform: rotate(30deg); }
  50% { transform: rotate(20deg); }
}

.ear.right {
  animation: ear-wiggle-right 1s infinite alternate;
}

响应式调整

使用媒体查询确保在不同设备上正常显示：

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

进阶技巧

添加胡须细节：

.head::before, .head::after {
  content: '';
  position: absolute;
  width: 40px;
  height: 1px;
  background: #333;
  top: 60px;
}

.head::before {
  left: 20px;
  transform: rotate(20deg);
}

.head::after {
  right: 20px;
  transform: rotate(-20deg);
}

通过组合圆形、椭圆和变形效果，CSS可以创建各种卡通形象。调整颜色、大小和位置参数可获得不同风格的兔子造型。