css3动画制作手臂摆动

CSS3动画是制作精美动效的利器，可以用来制作各种有趣的动画效果，今天我们就来学习如何用CSS3制作一个手臂摆动的动画效果。

.arm {
  position: relative;
  width: 200px;
  height: 200px;
  background: #fff;
  border-radius: 50%;
  margin: 0 auto;
}

.arm__elbow {
  position: absolute;
  left: 100px;
  top: 80px;
  width: 30px;
  height: 30px;
  background: #888;
  border-radius: 50%;
  transform-origin: bottom center;
  animation: swing 1s infinite alternate;
}

.arm__hand {
  position: absolute;
  left: 100px;
  top: 40px;
  width: 40px;
  height: 40px;
  background: #f00;
  border-radius: 50%;
}

@keyframes swing {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(60deg)
  }
}

首先我们先创建一个div元素，设定它的宽高和圆角来模拟手臂的形状，然后我们接着编写它的两个关键部位——手肘和手掌。

手肘元素通过设置相对定位来让它相对于手臂元素进行定位，并设置绝对定位的位置在手臂的中央位置，再通过设置左右偏移量来确定手肘的位置。接着我们将它的旋转基点设置在底部中心位置，这样一来在进行旋转的时候就会以底部为旋转中心，模拟手肘的弯曲动作。最后我们再设置它的动画属性，让它在1秒内无限往返运动，形成摆动的效果。

手掌元素同样是通过设置相对定位来让它相对于手臂元素进行定位，然后再通过设置左右偏移量来确定手掌的位置。最后我们对手臂元素应用一个旋转动画，让它与手肘元素的动作同步，从而形成一条完整流畅的摆动手臂。

到此为止，我们就完成了一个简单又有趣的手臂摆动的动画效果，相信通过这次练习，大家对CSS3动画的使用也更加熟练了吧。