Android Demo

通过一下属性，绘制安卓小机器人

形状绘制
定位
动画

使用形状绘制,绘制出安卓小机器人身体的各个部分
然后使用定位调整各个位置
最后使用动画使它动起来。

HTML

<div class="android">
  <div class="head">
    <div class="eyes eyes-left"></div>
    <div class="eyes eyes-right"></div>
    <div class="touch touch-left"></div>
    <div class="touch touch-right"></div>
  </div>
  <div class="body">
    <div class="hand hand-left"></div>
    <div class="hand hand-right"></div>
  </div>
  <div class="foots">
    <div class="foot foot-left"></div>
    <div class="foot foot-right"></div>
  </div>
  <div class="shadow"></div>
</div>

*{
  margin: 0;
  padding: 0;
}
/* 容器 */
.android{
  width: 221px;
  height: 242px;
  position: relative;
  margin: 250px auto 0;
  top: 0;
  animation:jump 2s ease-in-out infinite;
}
/ * 头部 */
.head{
  position: relative;
  width: 145px;
  height: 56px;
  margin: 0 auto;
  background: #ABC828;
  border-top-left-radius: 72px 56px;
  border-top-right-radius: 72px 56px;
  
}
/ * 眼睛 */
.eyes{
  position: absolute;
  width: 15px;
  height: 15px;
  background: #FFF;
  border-radius: 50%;
  animation:colorful 2s linear infinite alternate;
}
/* 左眼 */
.eyes-left{
  left: 35px;
  top: 21px;
}
/* 右眼 */
.eyes-right{
  left: 95px;
  top: 21px;
}
/* 触角 */
.touch{
  position: absolute;
  width: 4px;
  height: 25px;
  background: #ABC828;
  border-radius: 12px;
  left: 40px;
  top: -18px;
  animation:colorful 2s linear infinite alternate;
}
/* 左角 */
.touch-left{
  left: 40px;
  top: -18px;
  transform:rotate(-30deg);
}
/* 右角 */
.touch-right{
  left: 105px;
  top: -18px;
  transform:rotate(30deg);
}
/* 身体 */
.body{
  position: relative;
  width: 145px;
  height: 128px;
  margin: 4px auto;
  background: #ABC828;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}
/* 手 */
.hand{
  position: absolute;
  width: 30px;
  height: 95px;
  background: #ABC828;
  border-radius: 15px;
}
/* 左手 */
.hand-left{
  top: 8px;
  left: -32px;
  animation:openlefthand 2s ease-in-out infinite;
}
/* 右手 */
.hand-right{
  top: 8px;
  right: -32px;
  animation:openrighthand 2s ease-in-out infinite;
}
/* 脚容器 */
.foots{
  position: relative;
  width: 145px;
  height: 50px;
  margin: 0 auto 0;
}
/* 脚 */
.foot{
  position: absolute;
  width: 30px;
  height: 50px;
  background: #ABC828;
  border-radius: 15px;
}
/* 左脚 */
.foot-left{
  left:30px;
  animation:openrighthand 2s ease-in-out infinite;
}
/* 右脚 */
.foot-right{
  right: 30px;
  animation:openlefthand 2s ease-in-out infinite;
}
/* 阴影 */
.shadow{
  width: 46px;
  height:30px;
  background-color: #ccc;
  background: #ccc;
  border-radius:23px 15px;
  position: absolute;
  bottom: -80px;
  left: 50%; 
  box-shadow: 0 0 10px 10px #ccc;
  transform:scaleY(0.3) translateX(-50%);
  animation:shrink 2s ease-in-out infinite;
}
/* 跳跃动画 */
@keyframes jump{
  65%{
    top: -100px;
    transform:scale(1.1);
  }
}
/* 阴影动画 */
@keyframes shrink{
  65%{
    width: 134px;
    height: 90px;
    box-shadow: 0 0 20px 20px #ccc;
    border-radius: 72px 45px;
  }
}
/* 颜色动画 */
@keyframes colorful{
  0%{
    background: #FF0000;
  }
  65%{
    background: #152C5E;
  }
}
/* 右手动画 */
@keyframes openrighthand{
  65%{ 
    transform:rotate(-30deg);
    transform-origin:left 40px;
  }
}
/* 左手动画 */
@keyframes openlefthand{
  65%{ 
    transform:rotate(30deg);
    transform-origin:right 40px;
  }
}

# Android Demo

Android Demo