CSS製作安卓機器人

標籤：form   blog   splay   work   行內元素   amp   線上   order   機器人   

<p>安卓機器人</p><style><!--        /*整體*/                 .robot{            width:400px;            height:500px;            margin:0px auto;         }        /*頭部*/        .robot .head{            content:" ";            width:200px;            height:80px;              margin:0px auto;            background-Color:green;            border-radius:90px 90px 0px 0px;        }        /*眼睛*/        .robot .head::before{            content:" ";            width:16px;            height:16px;             display:block;            background:white;            border-radius:8px;            transform:translate(46px,40px);                    }                 .robot .head::after{                    content:" ";                    width:16px;                    height:16px;                     display:block;                    background:white;                    border-radius:8px;                    transform:translate(129px, 23px)                            }        /*身體*/        .robot .main{            content:" ";            width:200px;            height:180px;              margin:10px auto;            background-Color:green;            border-radius:0px 0px 22px 22px;        }        /*手*/        .robot .main::before{            content:" ";            width:35px;            height:120px;             display:block;            background:green;            border-radius:18px;            transform:translate(-50px, 9px);                    }        .robot .main::after{            content:" ";            width:35px;            height:120px;             display:block;            background:green;            border-radius:18px;            transform:translate(216px, -111px);                    }        /*腳*/        .robot .foot{            content:" ";            width:200px;            height:180px;              margin:-10px auto;         }        .robot .foot::before{            content:" ";            width:50px;            height:70px;             display:block;            background:green;            border-radius:0px 0px 30px 30px;            transform:translate(33px, 0px);            }        .robot .foot::after{            content:" ";            width:50px;            height:70px;             display:block;            background:green;            border-radius:0px 0px 30px 30px;            transform:translate(115px, -71px);            }/*    重點：        行內元素需要通過display屬性設定為block才能設定長寬。        通過border-radius屬性設定圓角;        格式：border-radius:左上方 右上方 右下角 左下角        通過transform屬性設定位移量        格式：transform:translate(位移量, 位移量);*/    --></style><div class="robot">&nbsp;</div>

 

 

線上看：http://bbqwifi.info/homework/201611/android.html

CSS製作安卓機器人