<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title></title>
<script></script>
<style>
.test{
border: 20px solid;
border-top-color:#ff0000;
border-right-color:#00ff00;
border-bottom-color:#0000ff;
border-left-color:#FFFF00;
width:100px;
height: 100px;
background: #272822;
}
.head{
border-bottom-left-radius: 50% 40%;
border-bottom-right-radius: 50% 40%;
border-top-left-radius: 50% 60%;
border-top-right-radius: 50% 60%;
border: 1px solid #ccc;
width:240px;
height:190px;
margin-left:100px;
position: relative;
background:#000;
z-index:10;}
.eyes_left{
width:45px;
height:70px;
background:#fff;
margin-left: 60px;
margin-top: 50px;
display:block;
border: 1px solid #ccc;
border-bottom-left-radius: 50% 50%;
border-bottom-right-radius: 50% 50%;
border-top-left-radius: 50% 50%;
border-top-right-radius: 50% 50%;
}
.eyes_left_eyes{
width:20px;
height:26px;
background:#000;
margin-left: 18px;
margin-top: 25px;
display:block;
border: 1px solid #ccc;
border-bottom-left-radius: 50% 50%;
border-bottom-right-radius: 50% 50%;
border-top-left-radius: 50% 50%;
border-top-right-radius: 50% 50%;
}
.eyes_left_eyes_ineyes{
width: 8px;
height: 12px;
background: #fff;
margin-left: 8px;
margin-top: 7px;
display:block;
border-bottom-left-radius: 50% 50%;
border-bottom-right-radius: 50% 50%;
border-top-left-radius: 50% 50%;
border-top-right-radius: 50% 50%;
}
.eyes_right{
width:45px;
height:70px;
background:#fff;
margin-left: 130px;
margin-top: -72px;
display:block;
border: 1px solid #ccc;
border-bottom-left-radius: 50% 50%;
border-bottom-right-radius: 50% 50%;
border-top-left-radius: 50% 50%;
border-top-right-radius: 50% 50%;
}
.eyes_right_eyes{
width:20px;
height:18px;
background:#000;
margin-left: 7px;
margin-top: 25px;
display:block;
border: 1px solid #ccc;
border-top-left-radius: 50% 100%;
border-top-right-radius: 50% 100%;
}
.eyes_right_eyes_ineyes{
width: 8px;
height: 12px;
background: #fff;
margin-left: 6px;
margin-top: 7px;
display:block;
border-top-left-radius: 50% 100%;
border-top-right-radius: 50% 100%;
}
.mouse_top{
width:160px;
height:20px;
margin-left:40px;
margin-top:5px;
background:#FF9C00;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-top-left-radius: 50% 98%;
border-top-right-radius: 50% 98%;
}
.mouse_bottom{
width:160px;
height:20px;
background:#FF9C00;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
margin-left:40px;
margin-top:-4px;
border-bottom-left-radius: 50% 100%;
border-bottom-right-radius: 50% 100%;
}
.mouse_Add{
width:120px;
height:25px;
background:#FF9C00;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
margin-left: 60px;
margin-top: -19px;
border-bottom-left-radius: 50% 100%;
border-bottom-right-radius: 50% 100%;
}
.weibo{
width:270px;
height:170px;
display: block;
margin-top: -140px;
margin-left: 85px;
border-bottom: 3px solid #000;
border-left: 3px solid #000;
border-right: 3px solid #000;
border-bottom-left-radius: 50% 50%;
border-bottom-right-radius: 50% 50%;
border-top-left-radius: 50% 50%;
border-top-right-radius: 50% 50%;
position: relative;
z-index:5;
background: red;
}
.weibo_xiao{
border-bottom-left-radius: 50% 43%;
border-bottom-right-radius: 15px;
border-top-left-radius: 20% 57%;
width:60px;
height:70px;
margin-left: 130px;
margin-top: -25px;
position: relative;
z-index:4;
background: red;
border:3px solid #000;
}
.shenti{
height:260px;
width:275px;
background: #000;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
margin-left: 83px;
margin-top: -180px;
border-bottom-left-radius: 50% 50%;
border-bottom-right-radius: 50% 50%;
border-top-left-radius: 50% 50%;
border-top-right-radius: 50% 50%;
z-index:1;
position:relative;}
.duzi{
width:220px;
height:220px;
background:#fff;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
margin-left: 110px;
margin-top: -230px;
border-bottom-left-radius: 50% 50%;
border-bottom-right-radius: 50% 50%;
border-top-left-radius: 50% 50%;
border-top-right-radius: 50% 50%;
z-index:3;
position:relative;}
.leftHandBottomContainer {
margin-top: 220px;
transform-origin: left top;
left: 73px;
top: 78px;
width: 100px;
height: 30px;
overflow: hidden;
position: absolute;
z-index: 1;
transform: rotate(-70deg);
-webkit-transform-origin: top left;
-webkit-transform: rotate(-70deg);
-moz-transform-origin: top left;
-moz-transform: rotate(-70deg);
-o-transform-origin: top left;
-o-transform: rotate(-70deg);
}
.leftHandBottom {
background: rgb(0, 0, 0);
border-width: medium 1px 1px;
border-style: none solid solid;
border-color: currentColor rgb(5, 3, 70) rgb(5, 3, 70);
border-image: none;
top: -26px;
width: 128px;
height: 44px;
position: absolute;
border-bottom-right-radius: 52% 23px;
border-bottom-left-radius: 48% 20px;
}
.leftHandTopContainer {
margin-top: 220px;
transform-origin: left bottom;
left: 73px;
top: 55px;
width: 118px;
height: 26px;
overflow: hidden;
position: absolute;
z-index: 1;
transform: rotate(-70deg);
-webkit-transform-origin: bottom left;
-webkit-transform: rotate(-70deg);
-moz-transform-origin: bottom left;
-moz-transform: rotate(-70deg);
-o-transform-origin: bottom left;
-o-transform: rotate(-70deg);
}
.leftHandTop {
background: rgb(0, 0, 0);
border: 1px solid rgb(5, 3, 70);
border-image: none;
width: 128px;
height: 54px;
position: absolute;
border-top-left-radius: 44% 38px;
border-top-right-radius: 56% 33px;
}
.rightHandTopContainer {
margin-top: 220px;
transform-origin: right bottom;
left: 264px;
top: 47px;
width: 118px;
height: 34px;
overflow: hidden;
position: absolute;
z-index: 3;
transform: rotate(65deg);
-webkit-transform-origin: bottom right;
-webkit-transform: rotate(65deg);
-moz-transform-origin: bottom right;
-moz-transform: rotate(65deg);
-o-transform-origin: bottom right;
-o-transform: rotate(65deg);
}
.rightHandTop {
background: black;
border: 1px solid rgb(5, 3, 70);
border-image: none;
left: -30px;
width: 148px;
height: 54px;
position: absolute;
border-top-left-radius: 59% 48px;
border-top-right-radius: 41% 54px;
transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
}
.rightHandBottomContainer {
margin-top: 220px;
transform-origin: right top;
left: 274px;
top: 81px;
width: 110px;
height: 58px;
overflow: hidden;
position: absolute;
z-index: 1;
transform: rotate(90deg);
-webkit-transform-origin: top right;
-webkit-transform: rotate(90deg);
-moz-transform-origin: top right;
-moz-transform: rotate(90deg);
-o-transform-origin: top right;
-o-transform: rotate(90deg);
}
.rightHandBottom {
background: black;
border-width: medium 1px 1px;
border-style: none solid solid;
border-color: currentColor rgb(0, 0, 0) rgb(0, 0, 0);
border-image: none;
left: 38px;
top: 1px;
width: 68px;
height: 28px;
position: absolute;
z-index: 999;
border-bottom-right-radius: 100% 40px;
}
.foot_left{
border-bottom-left-radius: 50% 50%;
border-bottom-right-radius: 30px;
border-top-left-radius: 50% 60%;
width:130px;
height:70px;
margin-left: 80px;
margin-top: -45px;
background:#FF9C00;
border:3px solid #000;
z-index:0;
position:relative;
}
.foot_right{
border-bottom-right-radius: 50% 50%;
border-bottom-left-radius: 30px;
border-top-right-radius: 50% 60%;
width:130px;
height:70px;
margin-left: 225px;
margin-top: -75px;
background:#FF9C00;
border:3px solid #000;
z-index:0;
position:relative;
}
</style>
</head>
<body>
<div class="head">
<div class="eyes_left">
<div class="eyes_left_eyes">
<div class="eyes_left_eyes_ineyes">
</div>
</div>
</div>
<div class="eyes_right">
<div class="eyes_right_eyes">
<div class="eyes_right_eyes_ineyes">
</div>
</div>
</div>
<div class="mouse_top">
</div>
<div class="mouse_bottom">
</div>
<div class="mouse_Add">
</div>
</div>
<div class="weibo">
</div>
<div class="weibo_xiao">
</div>
<div class="shenti">
</div>
<div class="leftHandTopContainer">
<div class="leftHandTop">
</div>
</div>
<div class="leftHandBottomContainer">
<div class="leftHandBottom">
</div>
</div>
<div class="rightHandTopContainer">
<div class="rightHandTop">
</div>
</div>
<div class="rightHandBottomContainer">
<div class="rightHandBottom">
</div>
</div>
<div class="duzi">
</div>
<div class="foot_left">
</div>
<div class="foot_right">
</div>
</body>
</html>