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: 220px;
  margin: 50px auto;
}

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

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

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

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

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

.left-eye {
  left: 60px;
}

.right-eye {
  right: 60px;
}

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

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

进阶细节优化

添加胡须和动态效果：

.mouth::before,
.mouth::after {
  content: '';
  position: absolute;
  width: 30px;
  height: 1px;
  background: #333;
  top: 5px;
}

.mouth::before {
  transform: rotate(20deg);
  left: -25px;
}

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

.rabbit:hover .ear {
  transform: rotate(0deg);
  transition: transform 0.3s ease;
}

颜色与阴影增强

使用CSS变量和阴影增加立体感：

:root {
  --rabbit-color: #f0f0f0;
  --shadow-color: rgba(0,0,0,0.1);
}

.head, .ear {
  background: var(--rabbit-color);
  box-shadow: 
    2px 2px 10px var(--shadow-color),
    inset -5px -5px 10px var(--shadow-color);
}

响应式调整

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

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

最终效果会呈现一个具有基础形态、可交互的扁平化卡通兔子，可通过调整尺寸参数、颜色变量和变形属性来改变风格。此方法避免使用SVG或Canvas，纯CSS方案性能更轻量。