画一个可以动的Android 小机器人

2017-08-08  本文已影响0人  莫晓白

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


image.png

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Android</title>
</head>
<body>
<div class="android">
    <div class="head">
        <div class="l_ant"></div>
        <div class="r_ant"></div>
        <div class="l_eye"></div>
        <div class="r_eye"></div>
    </div>
    <div class="body">
        <div class="l_arm"></div>
        <div class="r_arm"></div>
        <div class="l_leg"></div>
        <div class="r_leg"></div>
    </div>
</div>
</body>
</html>

初始化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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Android</title>
</head>
<body>
<div class="android">
    <div class="head">
        <div class="l_ant"></div>
        <div class="r_ant"></div>
        <div class="l_eye"></div>
        <div class="r_eye"></div>
    </div>
    <div class="body">
        <div class="l_arm"></div>
        <div class="r_arm"></div>
        <div class="l_leg"></div>
        <div class="r_leg"></div>
    </div>
</div>
<style type="text/css">
    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);
    }

</style>
</body>
</html>
上一篇 下一篇

猜你喜欢

热点阅读