美文网首页
画一个可以动的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 小机器人

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

          延伸阅读

          深度阅读

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

          栏目导航

          热点阅读

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

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

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

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

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

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