android复位机器人图片_画一个可以动的Android 小机器人

上次我们画了一个哆啦A梦,可惜这个哆啦A梦并不会动,今天我们就来画一个可以动的Android小人。这次,我们全程使用C3高级。

image.png

好,废话不多说,我们直接上代码。

Android

初始化css,由于我们这次只用到了div所以我们只初始化div就可以了

div {

margin: 0;

padding: 0;

}

设置整体的宽高、指定颜色

.android{

height: 404px;

width: 334px;

margin: 100px auto;

}

div div {

background: #A4CA39;

position: relative;

}

头部样式

.head{

width: 220px;

height: 100px;

top: 32px;

border-radius: 110px 110px 0 0;

-moz-border-radius: 110px 110px 0 0;

-webkit-border-radius: 110px 110px 0 0;

}

image.png

眼睛

.l_eye, .r_eye {

background: #fff;

width: 20px; height: 20px;

position: absolute; top: 42px;

border-radius: 10px;

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

}

.l_eye {left: 50px;}

.r_eye {right: 50px;}

image.png

接下来还有天线。。。

.l_ant, .r_ant{

width: 6px; height: 50px;

position: absolute; top: -34px;

border-radius: 3px;

-webkit-border-radius: 3px;

-moz-border-radius: 3px;

}

.l_ant {

left: 50px;

transform: rotate(-30deg);

-webkit-transform: rotate(-30deg);

-moz-transform: rotate(-30deg);

}

.r_ant {

right: 50px;

transform: rotate(30deg);

-webkit-transform: rotate(30deg);

-moz-transform: rotate(30deg);

}

image.png

好,现在有点意思了,我们继续画身体

.body{

width: 220px;

height: 184px;

top: 40px;

border-radius: 0 0 25px 25px;

-webkit-border-radius: 0 0 25px 25px;

-moz-border-radius: 0 0 25px 25px;

}

image.png

恩,还有胳膊和腿,我们把相同的样式先提取出来

.l_arm, .r_arm, .l_leg, .r_leg {

width: 50px;

position: absolute;

}

然后画胳膊

.l_arm, .r_arm {

height: 150px;

border-radius: 25px;

-moz-border-radius: 25px;

-webkit-border-radius: 25px;

}

.l_arm {left: -58px;}

.r_arm {right: -58px;}

image.png

已经有一个大致的形状了,我们接着画腿

.l_leg, .r_leg {

height: 80px; top: 182px;

border-radius: 0 0 25px 25px;

-moz-border-radius: 0 0 25px 25px;

-webkit-border-radius: 0 0 25px 25px;

}

.l_leg {left: 45px;}

.r_leg {right: 45px;}

image.png

ok,一个安卓小机器人就画好了,还没有结束,我们的目的是让他动,现在我们就通过鼠标触发的方式,让他动起来。

.head:hover {

-webkit-transform: rotate(-5deg) translate(-4px, -8px);

transform: rotate(-5deg) translate(-4px, -8px);

-moz-transform: rotate(-5deg) translate(-4px, -8px);

}

当鼠标经过头部的时候,我们让他的头部做一个小的偏移,当鼠标离开的时候,还原到初始状态。

image.png

这里面有一个小的问题,就是,这个变化是非常生硬的,没有过度。需要过度的话,我们需要在头部css中新添加一个属性

-webkit-transition: all 0.1s ease-in;

好,这就代表着;这个外头的动作需要0.1s过渡,过渡效果为均匀过渡,这样动画就不会过于生硬。

我们继续把两个胳膊的动作也加上

.l_arm:hover{

-webkit-transform: rotate(15deg) translate(-14px, 0);

transform: rotate(15deg) translate(-14px, 0);

-moz-transform: rotate(15deg) translate(-14px, 0);

}

.r_arm:hover{

-webkit-transform: rotate(-30deg) translate(30px, 0);

transform: rotate(-30deg) translate(30px, 0);

-moz-transform: rotate(-30deg) translate(30px, 0);

}

image.png

image.png

好,我们安卓小机器人也就做完了。代码也不多,也不难,但是,很有趣。我接下来就把刚才所写的整合到一起。

Android

div {

margin: 0;

padding: 0;

}

.android{

height: 404px; width: 334px;

margin: 100px auto;

}

div div {

background: #A4CA39;

position: relative;

}

.head{

width: 220px;

height: 100px;

top: 32px;

border-radius: 110px 110px 0 0;

-moz-border-radius: 110px 110px 0 0;

-webkit-border-radius: 110px 110px 0 0;

-webkit-transition: all 0.1s ease-in;

}

.l_eye, .r_eye {

background: #fff;

width: 20px; height: 20px;

position: absolute; top: 42px;

border-radius: 10px;

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

}

.l_eye {left: 50px;}

.r_eye {right: 50px;}

.l_ant, .r_ant{

width: 6px; height: 50px;

position: absolute; top: -34px;

border-radius: 3px;

-webkit-border-radius: 3px;

-moz-border-radius: 3px;

}

.l_ant {

left: 50px;

transform: rotate(-30deg);

-webkit-transform: rotate(-30deg);

-moz-transform: rotate(-30deg);

}

.r_ant {

right: 50px;

transform: rotate(30deg);

-webkit-transform: rotate(30deg);

-moz-transform: rotate(30deg);

}

.body{

width: 220px; height: 184px;

top: 40px;

border-radius: 0 0 25px 25px;

-webkit-border-radius: 0 0 25px 25px;

-moz-border-radius: 0 0 25px 25px;

}

.l_arm, .r_arm, .l_leg, .r_leg {

width: 50px; position: absolute;

-webkit-transition: all 0.1s ease-in;

}

.l_arm, .r_arm {

height: 150px;

border-radius: 25px;

-moz-border-radius: 25px;

-webkit-border-radius: 25px;

}

.l_arm {left: -58px;}

.r_arm {right: -58px;}

.l_leg, .r_leg {

height: 80px; top: 182px;

border-radius: 0 0 25px 25px;

-moz-border-radius: 0 0 25px 25px;

-webkit-border-radius: 0 0 25px 25px;

}

.l_leg {left: 45px;}

.r_leg {right: 45px;}

.head:hover {

-webkit-transform: rotate(-5deg) translate(-4px, -8px);

transform: rotate(-5deg) translate(-4px, -8px);

-moz-transform: rotate(-5deg) translate(-4px, -8px);

}

.l_arm:hover{

-webkit-transform: rotate(15deg) translate(-14px, 0);

transform: rotate(15deg) translate(-14px, 0);

-moz-transform: rotate(15deg) translate(-14px, 0);

}

.r_arm:hover{

-webkit-transform: rotate(-30deg) translate(30px, 0);

transform: rotate(-30deg) translate(30px, 0);

-moz-transform: rotate(-30deg) translate(30px, 0);

}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值