<html>
<head>
<meta charset="utf-8">
<title>简笔画QQ</title>
<style>
.inner{
width:500px;
height: 700px;
margin:20px auto;
position: relative;
}
/*头部*/
.head{
width:200px;
height:170px;
background-color: #000;
z-index: 10;
position: absolute;
top:0;
left:100px;
border:1px solid #999;
border-top-left-radius: 105px 105px;
border-top-right-radius: 105px 105px;
border-bottom-left-radius: 105px 62px;
border-bottom-right-radius: 105px 62px;
}
/*眼睛*/
.eyes-lef{
width:40px;
height:60px;
background-color: #fff;
position: absolute;
top:40px;
left:50px;
border:1px solid #999;
border-radius: 50% 50%;
-webkit-animation:flash 1s .2s ease both;
-moz-animation:flash 1s .2s ease both;
}
.eyes-rig{
width:40px;
height:60px;
background-color: #fff;
position: absolute;
top:40px;
right:50px;
border:1px solid #999;
border-radius: 50% 50%;
-webkit-animation:flash 1s .2s ease both;
-moz-animation:flash 1s .2s ease both;
}
@-webkit-keyframes flash{
0%,50%,100%{opacity: 1;} 25%,75%{opacity: 0;}
}
@-moz-keyframes flash{
0%,50%,100%{opacity: 1;} 25%,75%{opacity: 0;}
}
.eye-lef{
width:20px;
height:30px;
background-color: #000;
position: absolute;
top:15px;
right:4px;
border:1px solid #999;
border-radius: 50% 50%;
-webkit-animation:bounce 1s .2s ease both;
-moz-animation:bounce 1s .2s ease both;
-webkit-animation-delay:1s;
-moz-animation-delay:1s;
-webkit-animation-iteration-count:infinite;
-moz-animation-iteration-count:infinite;
}
@-webkit-keyframes bounce{
0%,20%,50%,80%,100%{-webkit-transform:translateY(0)}
40%{-webkit-transform:translateY(-10px)}
60%{-webkit-transform:translateY(-5px)}
}
@-moz-keyframes bounce{
0%,20%,50%,80%,100%{-moz-transform:translateY(0)}
40%{-moz-transform:translateY(-10px)}
60%{-moz-transform:translateY(-5px)}
}
.eye-rig{
width: 20px;
height: 23px;
background-color: #000;
position: absolute;
top:15px;
left:4px;
border: 1px solid #999;
border-top-left-radius: 10px 27px;
border-top-right-radius: 10px 27px;
border-bottom-left-radius: 0px 0px;
border-bottom-right-radius: 0px 0px;
-webkit-animation:bounce 1s .2s ease both;
-moz-animation:bounce 1s .2s ease both;
-webkit-animation-delay:1s;
-moz-animation-delay:1s;
-webkit-animation-iteration-count:infinite;
-moz-animation-iteration-count:infinite;
}
@-webkit-keyframes bounce{
0%,20%,50%,80%,100%{-webkit-transform:translateY(0)}
40%{-webkit-transform:translateY(-10px)}
60%{-webkit-transform:translateY(-5px)}
}
@-moz-keyframes bounce{
0%,20%,50%,80%,100%{-moz-transform:translateY(0)}
40%{-moz-transform:translateY(-10px)}
60%{-moz-transform:translateY(-5px)}
}
/*嘴巴*/
.mouse-top{
width: 145px;
height: 34px;
background: #FFA600;
position: absolute;
bottom: 29px;
left: 29px;
border: 1px solid #FFA600;
border-bottom: none;
border-top-left-radius: 45% 34px;
border-top-right-radius: 45% 34px;
}
.mouse-bun{
width: 124px;
height: 24px;
background: #FFA600;
position: absolute;
bottom:15px;
left:40px;
border: 1px solid #FFA600;
border-top: none;
border-bottom-left-radius: 45% 24px;
border-bottom-right-radius: 45% 24px;
margin-top: 20px;
}
/*围巾*/
.collar{
width: 241px;
height: 110px;
z-index: 5;
background-color: #FB0009;
position: absolute;
top: 100px;
left: 78px;
border:4px solid #000;
border-top-left-radius: 30px 34px;
border-top-right-radius: 38px 34px;
border-bottom-left-radius: 50% 76px;
border-bottom-right-radius: 50% 76px;
border-top: none;
}
/*身体*/
.body{
width: 270px;
height: 170px;
z-index: 3;
position: absolute;
top:160px;
left:69px;
overflow: hidden;
}
.body-out{
width: 260px;
height: 230px;
background-color: #000;
z-index: 3;
position: absolute;
bottom: 0px;
left: 0px;
border: 1px solid #000;
border-top: none;
border-radius:125px;
}
.body-int{
width: 215px;
height: 205px;
background-color: #fff;
z-index: 4;
position: absolute;
top: 18px;
left:24px;
border: 1px solid #000;
border-radius: 50%;
}
.pocket{
width: 50px;
height:60px;
z-index: 5;
background: #FB0009;
position: absolute;
top: 74px;
left:13px;
border:3px solid #000;
border-top-left-radius: 29px 54px;
border-bottom-left-radius: 37px 47px;
border-bottom-right-radius: 16px 13px;
}
/*手臂*/
.arms-lef{
width: 45px;
height: 111px;
position: absolute;
top: 153px;
left: 38px;
overflow: hidden;
transform: rotate(28deg);
-webkit-transform: rotate(28deg);
-moz-transform:rotate(28deg);
-o-transform:rotate(28deg);
-ms-transform:rotate(28deg);
}
.arm-lef{
width:40px;
height: 110px;
background-color: #000;
position: absolute;
bottom: 0px;
left:0px;
border:1px solid #000;
border-top-left-radius: 74px 171px;
border-top-right-radius: 38px 93px;
border-bottom-left-radius: 103px 155px;
border-bottom-right-radius: 34px 159px;
}
.arms-rig{
width: 41px;
height: 108px;
position: absolute;
top: 158px;
left: 308px;
overflow: hidden;
transform: rotate(-21deg);
-webkit-transform: rotate(-21deg);
-moz-transform:rotate(-21deg);
-o-transform:rotate(-21deg);
-ms-transform:rotate(-21deg);
}
.arm-rig{
width:40px;
height: 110px;
background-color: #000;
position: absolute;
bottom: 0px;
right:0px;
border:1px solid #000;
border-top-left-radius: 17px 48px;
border-top-right-radius: 15px 53px;
border-bottom-left-radius: 20px 86px;
border-bottom-right-radius: 31px 80px;
}
/*脚*/
.foot-lef{
width: 111px;
height: 69px;
background: #FFA600;
position: absolute;
top: 279px;
left: 76px;
border:4px solid #000;
border-top: none;
border-top-left-radius: 70px 36px;
border-bottom-left-radius: 63px 38px;
border-bottom-right-radius: 50px 39px;
}
.foot-rig{
width: 110px;
height: 65px;
background: #FFA600;
position: absolute;
top: 285px;
left: 203px;
border: 4px solid #000;
border-top-right-radius: 60px 51px;
border-bottom-left-radius: 68px 41px;
border-bottom-right-radius: 69px 33px;
}
</style>
</head><body>
<div class="inner">
<!-- 头部 -->
<div class="head">
<!-- 眼睛 -->
<div class="eyes-lef">
<div class="eye-lef"></div>
</div>
<div class="eyes-rig">
<div class="eye-rig"></div>
</div>
<!-- 嘴巴 -->
<div class="mouse-top"></div>
<div class="mouse-bun"></div>
</div>
<!-- 围巾 -->
<div class="collar"></div>
<!-- 身体 -->
<div class="body">
<div class="body-out">
<div class="body-int">
<div class="pocket"></div>
</div>
</div>
</div>
<!-- 手臂 -->
<div class="arms-lef">
<div class="arm-lef"></div>
</div>
<div class="arms-rig">
<div class="arm-rig"></div>
</div>
<!-- 脚 -->
<div class="foot-lef"></div>
<div class="foot-rig"></div>
</div>
</body>
</html>