使用CSS3绘制简单的Android机器人

最新推荐文章于 2023-01-03 12:01:13 发布

evan_qb

最新推荐文章于 2023-01-03 12:01:13 发布

阅读量1.3k

点赞数 2

分类专栏：前端文章标签： css3 html

本文链接：https://blog.csdn.net/Evan_QB/article/details/78168734

版权

前端专栏收录该内容

76 篇文章 1 订阅

订阅专栏

html部分

<body>
    <div class="board">
        <div class="android">
            <div class="head"></div>
            <div class="body"></div>
            <div class="arms"></div>
        </div>
    </div>
</body>

CSS部分

<style>
    body{
        margin: 0;
        padding: 0;
        background-color: #f7f7f7;
    }

    .board{
        width: 600px;
        height: 440px;
        margin: 80px auto;
        background-color: #fff;
    }

    .android{
        width: 340px;
        height: 330px;
        margin: 0 auto;
        position: relative;
        text-align: center;
    }
    /*脑袋*/
    .head{
        position: relative;
        width: 220px;
        height: 110px;
        margin: 30px auto;
        top: 20px;
        border-radius: 100px 100px 0 0;
        background-color: #a4ca39;
        box-shadow: 5px 5px 10px 5px #666;
    }

    /*眼睛*/
    .head::before,.head::after{
        content: '';
        display: block;
        width: 20px;
        height: 20px;
        background-color: #fff;
        border-radius: 10px;
        position: absolute;
        top: 40px;
    }
    /*眼睛*/
    .head::before{
        left: 50px;
    }

    .head::after{
        right: 50px;
    }

    /*身体*/
    .body{
        width: 220px;
        height: 180px;
        background-color: #a4ca39;
        border-radius: 0 0 20px 20px;
        position: relative;
        margin: 0 auto;
        box-shadow: 5px 5px 10px 5px #666;
    }

    /*两边的手臂*/
    .arms::before,.arms::after{
        content: '';
        display: block;
        width: 50px;
        height: 150px;
        border-radius: 25px;
        position: absolute;
        background-color: #a4ca39;
        top: 15px;
    }

    /*左手*/
    .arms::before{
        box-shadow: -5px 5px 10px 0 #666;
        top: 135px;
        left: 8px;
    }
    /*右手*/
    .arms::after{
        right: 8px;
        box-shadow: 5px 5px 10px 0 #666;
    }

    /*腿部*/
    .body::before,.body::after{
        content: '';
        display: block;
        width: 50px;
        height: 80px;
        border-radius: 0 0 25px 25px;
        position: absolute;
        bottom: -80px;
        background-color: #a4ca39;
        box-shadow: 5px 10px 10px 0 #666;
    }

    /*左腿*/
    .body::before{
        left: 20px;
    }

    /*右腿*/
    .body::after{
        right: 20px;
    }
</style>

效果如下: