H5绘制Android机器人

╰+攻爆jí腚メ 2022-05-10 04:06 129阅读 0赞

H5提供了很多绘画功能，让页面更加炫酷。这也是H5很受欢迎的原因之一。下面是绘制Android机器人全部代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            body{
                background-color: #ccc;
            }
            .content{
                width: 500px;
                height: 500px;
                border: 1px solid red;
                margin:50px auto;
            }
            .an_header{
                width: 250px;
                height: 125px;
                background-color: darkgreen;
                margin: 10px auto;
                /*添加圆角*/
                border-radius: 125px 125px 0 0;
                position: relative;
            }
            /*使用伪元素添加眼睛*/
            .an_header::before,
            .an_header::after{
                /*1.一定设置content属性*/
                content: "";
                /*2.如果需要设置宽度就应该转换其为块级元素，它默认是行级元素  float  display  position*/
                position: absolute;
                bottom: 40px;
                width: 20px;
                height: 20px;
                border-radius: 10px;
                background-color: #fff;
            }
            .an_header::before{
                left: 70px;
            }
            .an_header::after{
                right: 70px;
            }
            .an_body{
                width: 250px;
                height: 250px;
                background-color: darkgreen;
                border-radius: 0px 0px 20px 20px;
                margin:0 auto;
                position: relative;
            }
            .an_body::before,
            .an_body::after{
                content: "";
                position: absolute;
                top: 20px;
                background-color: darkgreen;
                width: 30px;
                height: 180px;
                border-radius: 10px;
            }
            .an_body::before{
                left:-40px;
            }
            .an_body::after{
                right:-40px;
            }
    
            .an_footer{
                width: 250px;
                height: 100px;
                position: relative;
                margin:0 auto;
            }
            .an_footer::before,
            .an_footer::after{
                content: "";
                position: absolute;
                top: 00px;
                background-color: darkgreen;
                width: 30px;
                height: 90px;
                border-radius: 0px 0px 10px 10px;
            }
            .an_footer::before{
                left: 50px;
            }
            .an_footer::after{
                right: 50px;
            }
        </style>
    </head>
    <body>
    <div class="content">
        <div class="an_header"></div>
        <div class="an_body"></div>
        <div class="an_footer"></div>
    </div>
    </body>
    </html>