美文网首页
画一个可以动的Android 小机器人

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

作者: 莫晓白 | 来源:发表于2017-08-08 21:57 被阅读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>

相关文章

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

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

  • 初识Android系统平台

    一、Android简介     Android的中文意思是“机器人”，它的logo也是一个可爱的小机器人。Andr...

  • 入仙宗 问道名 心之所向冲霄河

    今天我要画一个Android机器人，开始。 一小时后 代码 Over 或许廉价、容易得到的东西大都不会去珍惜吧。

  • Randall | 五、Vector Asset

    启动图标 Android工程在第一次建立时，ic_launcher图标是一个Android小机器人，对于Demo来...

  • 五秒钟使用sketch做一个属于你的机器人

    bottts是一个sketch机器人库，内置小机器人模版。使用它你可以轻松制作一个喜欢的机器人图案！ 制作过程非常...

  • 五一劳动节：地球不爆炸，小语“不放假”！

    小语机器人五一“不放假”通知 5.1-5.4 您都可以随时召唤小语机器人 作为AI智能客服机器人 小语每天元气满满...

  • [科幻]机械心（1）

    目录 （1）点赞机器人 我叫RobotQ，你也可以叫我小Q。 我是一个机器人，一个点赞机器人，我的工作就是为人们点...

  • 假如

    假如我有一枝马良的神笔， 我要给妈妈画一个会做家务的机器人。 这样妈妈就可以多多休息， 不会再累得连连喘气。 假如...

  • OpenGL 三角形

    OpenGL ES 3.0 Android 4.3开始 现在完全可以从3.0 开始了 今天闲来画一个最基本的三角形...

  • 每周一绘～你发照片我来画

    2017 年17加油17变好 春天即将来了 给自己定个小目标吧。 就是每周起码画一副不错的手绘人物。 风格是动...

网友评论

      本文标题：画一个可以动的Android 小机器人

      本文链接：https://www.haomeiwen.com/subject/dnexrxtx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|画一个可以动的Android 小机器人|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！