如何使用纯CSS实现一只会动的手

纯CSS实现动态图形是前端开发中很有意思的练习方向，会动的手可以通过组合多个div元素、伪元素以及CSS动画属性完成，不需要任何JavaScript代码参与。

一、搭建手的基础结构

我们首先需要用HTML定义手的各个组成部分，包括手掌和五根手指，每根手指又可以拆分为指节，这样后续做动画时调整空间更大。

<div class="hand">
  <div class="palm"></div>
  <div class="finger thumb">
    <div class="finger-section s1"></div>
    <div class="finger-section s2"></div>
  </div>
  <div class="finger index">
    <div class="finger-section s1"></div>
    <div class="finger-section s2"></div>
    <div class="finger-section s3"></div>
  </div>
  <div class="finger middle">
    <div class="finger-section s1"></div>
    <div class="finger-section s2"></div>
    <div class="finger-section s3"></div>
  </div>
  <div class="finger ring">
    <div class="finger-section s1"></div>
    <div class="finger-section s2"></div>
    <div class="finger-section s3"></div>
  </div>
  <div class="finger pinky">
    <div class="finger-section s1"></div>
    <div class="finger-section s2"></div>
  </div>
</div>

二、编写基础样式

接下来给各个元素设置基础样式，统一颜色、圆角，再调整每个部分的位置，让它们组合成手的初始形态。

/* 整体容器 */
.hand {
  position: relative;
  width: 200px;
  height: 300px;
  margin: 50px auto;
}

/* 手掌样式 */
.palm {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 150px;
  background: #f5d0a9;
  border-radius: 20px 20px 30px 30px;
}

/* 手指通用样式 */
.finger {
  position: absolute;
  bottom: 140px;
  left: 50%;
  transform-origin: bottom center;
  background: #f5d0a9;
}

/* 指节通用样式 */
.finger-section {
  width: 100%;
  background: #f5d0a9;
  border-radius: 10px;
}

/* 拇指样式 */
.thumb {
  width: 30px;
  height: 80px;
  transform: translateX(-50px) rotate(-30deg);
  transform-origin: bottom center;
}
.thumb .s1 {
  height: 40px;
}
.thumb .s2 {
  height: 40px;
}

/* 食指样式 */
.index {
  width: 28px;
  height: 110px;
  transform: translateX(-35px);
}
.index .s1 {
  height: 35px;
}
.index .s2 {
  height: 35px;
}
.index .s3 {
  height: 40px;
}

/* 中指样式 */
.middle {
  width: 30px;
  height: 120px;
  transform: translateX(-15px);
}
.middle .s1 {
  height: 40px;
}
.middle .s2 {
  height: 40px;
}
.middle .s3 {
  height: 40px;
}

/* 无名指样式 */
.ring {
  width: 28px;
  height: 110px;
  transform: translateX(5px);
}
.ring .s1 {
  height: 35px;
}
.ring .s2 {
  height: 35px;
}
.ring .s3 {
  height: 40px;
}

/* 小指样式 */
.pinky {
  width: 25px;
  height: 90px;
  transform: translateX(25px);
}
.pinky .s1 {
  height: 45px;
}
.pinky .s2 {
  height: 45px;
}

三、添加动画效果

我们用@keyframes定义关键帧动画，分别给手指和手掌添加不同的动态效果，让整只手看起来是活动的。

/* 手掌轻微晃动动画 */
@keyframes palmShake {
  0%, 100% {
    transform: translateX(-50%) rotate(0deg);
  }
  50% {
    transform: translateX(-50%) rotate(2deg);
  }
}

/* 拇指摆动动画 */
@keyframes thumbMove {
  0%, 100% {
    transform: translateX(-50px) rotate(-30deg);
  }
  50% {
    transform: translateX(-50px) rotate(-25deg);
  }
}

/* 食指摆动动画 */
@keyframes indexMove {
  0%, 100% {
    transform: translateX(-35px) rotate(0deg);
  }
  50% {
    transform: translateX(-35px) rotate(3deg);
  }
}

/* 中指摆动动画 */
@keyframes middleMove {
  0%, 100% {
    transform: translateX(-15px) rotate(0deg);
  }
  50% {
    transform: translateX(-15px) rotate(-2deg);
  }
}

/* 无名指摆动动画 */
@keyframes ringMove {
  0%, 100% {
    transform: translateX(5px) rotate(0deg);
  }
  50% {
    transform: translateX(5px) rotate(2deg);
  }
}

/* 小指摆动动画 */
@keyframes pinkyMove {
  0%, 100% {
    transform: translateX(25px) rotate(0deg);
  }
  50% {
    transform: translateX(25px) rotate(-3deg);
  }
}

/* 给对应元素绑定动画 */
.palm {
  animation: palmShake 3s ease-in-out infinite;
}
.thumb {
  animation: thumbMove 2.5s ease-in-out infinite;
}
.index {
  animation: indexMove 2s ease-in-out infinite 0.1s;
}
.middle {
  animation: middleMove 2.2s ease-in-out infinite 0.2s;
}
.ring {
  animation: ringMove 2.4s ease-in-out infinite 0.3s;
}
.pinky {
  animation: pinkyMove 2.6s ease-in-out infinite 0.4s;
}

四、核心要点说明

实现这个效果有几个需要注意的核心点：

• 所有手指的transform-origin都设置为底部中心，这样旋转动画会以手指根部为轴心，更符合真实手指的活动逻辑。
• 不同手指的动画设置了不同的延迟时间，避免所有手指同时摆动，看起来更自然。
• 如果觉得颜色不够真实，可以调整background的颜色值，也可以给手掌和手指添加阴影增强立体感。
• 想要调整摆动幅度，只需要修改关键帧里rotate的角度值即可，角度越大摆动幅度越大。

按照上面的代码写完之后，直接在浏览器中打开HTML文件，就能看到一只用纯CSS实现的会动的手了，你也可以根据自己的需求调整样式和动画参数，做出更符合预期的效果。

CSS动画纯CSS绘制关键帧动画transform属性修改时间：2026-06-04 02:57:02