首页 > 代码库 > CSS制作安卓机器人
CSS制作安卓机器人
<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"> </div>
效果图在线看:http://bbqwifi.info/homework/201611/android.html
CSS制作安卓机器人
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。