[分享]css3小黄人臂制作

CSS3小黄人臂制作教程，以下是详细步骤：

/*先定义小黄人臂的样式*/
.minion-arm {
  width: 30px; /*臂的宽度*/
  height: 80px; /*臂的高度*/
  background-color: #f7d67c; /*臂的颜色*/
  position: absolute; /*绝对定位*/
  top: 70px; /*上部距离*/
  right: 115px; /*右边距离*/
  transform-origin: 95% 19%; /*变换原点*/
}
/*左臂*/
.minion-arm.left {
  transform: rotate(45deg); /*旋转45度*/
}
/*右臂*/
.minion-arm.right {
  transform: rotate(-45deg); /*旋转-45度*/
}
/*手*/
.minion-arm:before {
  content: ';/*伪元素*/
  width: 20px; /*手的宽度*/
  height: 35px; /*手的高度*/
  background-color: #000; /*手的颜色*/
  position: absolute; /*绝对定位*/
  right: 0; /*右边距离为0*/
  bottom: 0; /*下部距离为0*/
  border-radius: 50% 50% 0 0; /*设置边角半径*/
  transform-origin: 50% 0; /*变换原点*/
  transform: rotate(45deg); /*旋转45度*/
}
/*左手*/
.minion-arm.left:before {
  transform: rotate(-45deg); /*旋转-45度*/
  right: 3px; /*调整位置*/
  bottom: -8px; /*调整位置*/
}
/*右手*/
.minion-arm.right:before {
  transform: rotate(-135deg); /*旋转-135度*/
  right: -3px; /*调整位置*/
  bottom: -8px; /*调整位置*/
} 

以上代码就是使用CSS3制作小黄人臂的过程。希望大家会喜欢这个小黄人臂的效果！