当前位置：首页 > CSS

css制作汤姆猫

2026-03-12 06:19:07CSS

使用CSS制作汤姆猫动画

HTML结构 创建基本的HTML结构，包含汤姆猫的各个部分（身体、头部、眼睛、嘴巴等）：

<div class="tom-cat">
  <div class="head">
    <div class="eye left-eye"></div>
    <div class="eye right-eye"></div>
    <div class="mouth"></div>
  </div>
  <div class="body"></div>
  <div class="tail"></div>
</div>

基础样式 设置汤姆猫的基础形状和颜色：

.tom-cat {
  position: relative;
  width: 300px;
  height: 400px;
}

.head {
  width: 150px;
  height: 120px;
  background: #ff9966;
  border-radius: 60% 60% 50% 50%;
  position: absolute;
  top: 50px;
  left: 75px;
}

.body {
  width: 200px;
  height: 250px;
  background: #ff9966;
  border-radius: 40% 40% 30% 30%;
  position: absolute;
  top: 150px;
  left: 50px;
}

面部细节 添加眼睛、鼻子和嘴巴等细节：

.eye {
  width: 30px;
  height: 40px;
  background: white;
  border-radius: 50%;
  position: absolute;
  top: 40px;
}

.left-eye {
  left: 30px;
}

.right-eye {
  right: 30px;
}

.mouth {
  width: 60px;
  height: 20px;
  background: #ff6666;
  border-radius: 0 0 30px 30px;
  position: absolute;
  bottom: 20px;
  left: 45px;
}

动画效果 使用CSS动画让汤姆猫眨眼和摇尾巴：

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

.eye {
  animation: blink 3s infinite;
}

@keyframes wag {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(20deg); }
}

.tail {
  width: 80px;
  height: 20px;
  background: #ff9966;
  position: absolute;
  top: 180px;
  right: 40px;
  transform-origin: left center;
  animation: wag 2s infinite;
}

交互效果 添加鼠标悬停时的反应：

.tom-cat:hover .mouth {
  height: 30px;
  border-radius: 50%;
  background: #ff3333;
}

.tom-cat:hover .eye {
  animation: none;
  height: 30px;
  width: 35px;
}

完整实现建议

css制作汤姆猫