[分享]Css动画拼接机器人

Css动画一直是Web设计中不可或缺的一部分。而用Css动画拼接出机器人更是展现了Css动画的威力。下面我们就来分享一下如何用Css动画拼接出一个机器人。/ 先创建一个机器人的头部 / .head {...

Css动画一直是Web设计中不可或缺的一部分。而用Css动画拼接出机器人更是展现了Css动画的威力。下面我们就来分享一下如何用Css动画拼接出一个机器人。

/* 先创建一个机器人的头部 */
.head {
  width: 70px;
  height: 70px;
  background-color: #5d1d84;
  border-radius: 50% 50% 0 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: head 1s infinite alternate;
}

/* 头部动画 */
@keyframes head {
  0% {
    transform: translate(-50%, -50%) rotate(0);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* 接下来是机器人的眼睛 */
.eye {
  width: 15px;
  height: 15px;
  background-color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  animation: eye 1s infinite alternate;
}

/* 眼睛动画，让眼珠子转动 */
@keyframes eye {
  0% {
    transform: translate(-50%, -50%) rotate(0);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* 接下来是机器人的身体 */
.body {
  width: 100px;
  height: 150px;
  background-color: #5d1d84;
  position: absolute;
  top: 70%;
  left: 50%;
  border-radius: 10px;
}

/* 在机器人的身体里面放置两个简单的手臂 */
.arm {
  width: 20px;
  height: 50px;
  background-color: #5d1d84;
  position: absolute;
  top: 0;
  left: 50%;
  border-radius: 10px;
  animation: arm 1s infinite alternate;
}

/* 手臂动画 */
@keyframes arm {
  0% {
    transform: translate(-50%, 0) rotate(0);
  }
  100% {
    transform: translate(-50%, 0) rotate(-30deg);
  }
} 

以上代码就是一个简单的用Css动画拼接出了机器人的示例。我们开放想象力，一步步地把机器人补充完整，使得机器人更加生动。