css猫表情制作

CSS猫表情制作方法

使用纯CSS绘制猫表情
通过CSS的border-radius、transform和伪元素实现猫脸和耳朵的基本形状。例如：

.cat-face {
  width: 100px;
  height: 80px;
  background: #FFD700;
  border-radius: 50%;
  position: relative;
}
.cat-face::before, .cat-face::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  background: #FFD700;
  top: -10px;
  border-radius: 50% 50% 0 0;
}

添加眼睛和胡须
用绝对定位和box-shadow绘制眼睛，线条类属性制作胡须：

.eyes {
  position: absolute;
  width: 10px;
  height: 15px;
  background: #000;
  border-radius: 50%;
  top: 30px;
}
.whiskers {
  position: absolute;
  width: 40px;
  height: 1px;
  background: #000;
  transform: rotate(20deg);
}

动画效果
通过@keyframes实现眨眼或摇尾巴的动画：

@keyframes blink {
  0%, 100% { height: 15px; }
  50% { height: 2px; }
}
.eyes {
  animation: blink 3s infinite;
}

表情变体控制
利用CSS变量或类切换实现不同表情（如开心、生气）：

.cat-happy .mouth {
  width: 30px;
  height: 10px;
  border-bottom: 2px solid #000;
  border-radius: 0 0 50% 50%;
}
.cat-angry .eyebrows {
  transform: rotate(10deg);
}

响应式调整
使用vw/vh单位或媒体查询适配不同屏幕：

@media (max-width: 600px) {
  .cat-face {
    width: 60px;
    height: 50px;
  }
}

完整示例结构
HTML基础结构需包含所有CSS控制的元素：

<div class="cat-face">
  <div class="eyes left-eye"></div>
  <div class="eyes right-eye"></div>
  <div class="mouth"></div>
</div>