css 制作人物胳膊的活动

CSS可通过设置样式来制作人物的胳膊活动。下面是一个示例：

.arm {
      width: 50px;
     /* 胳膊宽度 */  height: 150px;
     /* 胳膊高度 */  position: absolute;
     /* 绝对定位 */  top: 200px;
     /* 胳膊上边距 */  left: 150px;
     /* 胳膊左边距 */  background-color: #000;
     /* 胳膊颜色 */  border-radius: 10px;
     /* 圆角 */  transform-origin: top center;
     /* 设置旋转基点 */  animation-duration: 2s;
     /* 动画持续时间 */  animation-timing-function: ease-in-out;
     /* 动画时间曲线 */  animation-iteration-count: infinite;
     /* 动画重复次数 */  animation-direction: alternate;
 /* 动画来回播放 */}
/* 改变胳膊活动状态 */@keyframes arm-swing {
  0% {
        transform: rotate(0);
  }
  50% {
        transform: rotate(45deg);
  }
  100% {
        transform: rotate(0);
  }
}
    

以上代码可以创建一个长150像素，宽50像素的黑色胳膊，并将其绝对定位在距离顶部200像素、左侧150像素的位置。通过使用CSS动画来使胳膊在起始位置、旋转45度、再回到起始位置之间来回摆动。设置transform-origin属性来指定胳膊旋转的基点（在中心上方），增加了胳膊活动的真实感。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！