CSS3写的安卓机器人

Author：孙肖宁
发布时间：June 4, 2018
7035 views
One comment
2562 words
Categories：编程语言

用CSS实现安卓机器人

所用的技术就是伪类::before和::before，以及定位，圆角 border-radius
实现效果如下：

实现代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>安卓机器人</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #F7F7F7;
        }
        .board{
            width: 600px;
            height: 440px;
            margin: 80px auto;
            background-color: #FFFFFF;
        }
        .android{
            width: 340px;
            padding-top: 40px;
            margin: 0 auto;
            position: relative;
        }
        /*头部*/
        .head{
            width: 220px;
            height: 100px;
            margin: 0 auto 10px;
            border-radius: 100px 100px 0 0;
            background-color: #A4CA39;
            position: relative;
        }
        /*眼镜*/
        .head::before,.headC{
            content: '';
            display: block;
            width: 20px;
            height: 20px;
            background-color: #FFFFFF;
            border-radius: 10px;
            position: absolute;
            top: 40px;
        }
        .head::before{
            left: 50px;
        }
        .head::after{
            right: 50px;
        }
        /*身体*/
        .body{
            width: 220px;
            height: 180px;
            margin: 0 auto;
            background: #A4CA39;
            border-radius: 0 0 20px 20px;
            position: relative;
        }
        /*腿*/
        .body::before,.body::after{
            content: '';
            display: block;
            width: 50px;
            height: 80px;
            background: #A4CA39;
            border-radius: 0 0 25px 25px;
            position: absolute;
            bottom: -80px;
        }
        .body::before{
            left: 40px;
        }
        .body::after{
            right: 40px;
        }
        /*胳膊*/
        .arms{
            width: 340px;
            height: 150px;
            position: absolute;
            top: 150px;
        }
        .arms::before,.arms::after{
            content: '';
            display: block;
            width: 50px;
            height: 150px;
            background-color: #A4CA39;
            border-radius: 25px;
            position: absolute;
        }
        .arms::before{
            left: 0;
        }
        .arms::after{
            right: 0;
        }
    </style>
</head>
<body>
<div class="board">
    <div class="android">
        <div class="head"></div>
        <div class="body"></div>
        <div class="arms"></div>
    </div>
</div>
</body>
</html>

Last modification：June 4, 2018