Html
    Css
    Js

    
                        
  * {
	margin:0;
	padding:0;
}
.center {
	width:350px;
	height:450px;
	margin:0 auto;
	/* border:1px solid red;
	*/
            position:relative;
	transition:all 5s ease;
}
.center:hover {
	opacity:.01;
	background-color:aquamarine;
}
.head-left,.head-right {
	width:50px;
	height:5px;
	background-color:greenyellow;
	position:absolute;
	top:30px;
}
.head-left {
	left:60px;
	transform:rotate(45deg);
}
.head-right {
	right:60px;
	transform:rotate(-45deg);
}
.face {
	position:absolute;
	top:10px;
	left:calc(50% - 100px);
	width:200px;
	height:100px;
	background-color:greenyellow;
	border-radius:100px 100px 0 0;
}
.eyes-left,.eyes-right {
	width:15px;
	height:15px;
	background-color:black;
	border-radius:50%;
	position:absolute;
	top:60px;
}
.eyes-left {
	left:100px;
}
.eyes-right {
	right:100px;
}
.belly {
	width:200px;
	height:230px;
	background-color:greenyellow;
	position:absolute;
	top:120px;
	left:75px;
	border-radius:0 0 20px 20px
}
.hand-left,.hand-right {
	width:50px;
	height:180px;
	background-color:greenyellow;
	border-radius:30px 30px 30px 30px;
	position:absolute;
	top:130px;
}
.hand-right {
	right:0;
}
.foot-left,.foot-right {
	width:50px;
	height:100px;
	background-color:greenyellow;
	position:absolute;
	bottom:25px;
	border-radius:30px 30px 30px 30px;
}
.foot-left {
	left:110px;
}
.foot-right {
	right:110px;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

css绘制安卓机器人

圆角 border-radius的简单使用方式.

1
      L0
      2020/1/10 14:39:32
      安卓要是知道 会气哭的 回复