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

来源：互联网发布：windows字体安装包编辑：程序博客网时间：2024/06/06 04:03

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>

效果如下:

阅读全文

0 0