css猫表情制作

CSS 猫表情制作方法

使用纯CSS绘制猫脸 通过CSS的border-radius和transform属性可以绘制基本形状，组合成猫脸。以下是一个简单示例：

.cat-face {
  width: 100px;
  height: 100px;
  background: #FFD700;
  border-radius: 50%;
  position: relative;
}

.cat-ears::before, .cat-ears::after {
  content: '';
  position: absolute;
  width: 40px;
  height: 40px;
  background: #FFD700;
  top: -20px;
}

.cat-ears::before {
  left: 10px;
  transform: rotate(-30deg);
}

.cat-ears::after {
  right: 10px;
  transform: rotate(30deg);
}

添加眼睛和胡须 使用伪元素创建眼睛和胡须细节：

.cat-eyes::before, .cat-eyes::after {
  content: '';
  position: absolute;
  width: 15px;
  height: 20px;
  background: #000;
  border-radius: 50%;
  top: 40px;
}

.cat-eyes::before { left: 30px; }
.cat-eyes::after { right: 30px; }

.cat-whiskers {
  position: absolute;
  width: 60px;
  height: 2px;
  background: #000;
  top: 60px;
  left: 20px;
}

动画效果 通过CSS动画让猫表情更生动：

@keyframes blink {
  0%, 100% { height: 20px; }
  50% { height: 5px; }
}

.cat-eyes::before, .cat-eyes::after {
  animation: blink 3s infinite;
}

进阶技巧

使用CSS变量控制颜色 定义变量便于整体风格调整：

:root {
  --cat-color: #FFD700;
  --eye-color: #000;
}

.cat-face {
  background: var(--cat-color);
}

响应式设计 通过媒体查询适配不同设备：

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

完整HTML结构示例

<div class="cat-face">
  <div class="cat-ears"></div>
  <div class="cat-eyes"></div>
  <div class="cat-whiskers"></div>
</div>

通过组合这些CSS技巧，可以创建各种风格的猫表情，调整尺寸、颜色和动画参数可实现不同效果。