css写出来的QQ企鹅
<!DOCTYPE HTML>
<html>
<!--
Made In 花小柒
-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>QQ企鹅妹妹</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
position: absolute;
}
.qq_body {
width: 470px;
height: 540px;
left: 100px;
top: 100px;
}
/*QQ头部*/
.head {
z-index: 0;
left: 65px;
top: 0;
width: 345px;
height: 367px;
background: #19161A;
border-radius: 50%;
}
/*QQ眼睛*/
.lefteye,.righteye {
width: 66px;
height: 99px;
border-radius: 50%;
background: #fff;
left: 153px;
top: 76px;
z-index: 7;
overflow: hidden;
}
.eyeball {
width: 30px;
height: 42px;
background: #201E1F;
border-radius: 50%;
left: 28px;
top: 34px;
}
.eyeball .eyewhite {
width: 11px;
height: 18px;
background: #fff;
border-radius: 50%;
left: 12px;
top: 12px;
}
.righteye {
left: 245px;
}
.righteye .eyeball {
left: 11px;
}
.eyeshadowwhite {
width: 65px;
height: 54px;
border-radius: 50%;
background: rgba(255, 255, 255, 1);
top: 20px;
}
/*QQ嘴巴*/
.mouth_box {
width: 344px;
height: 188px;
top: 102px;
left: 66px;
border-radius: 50%;
z-index: 6;
background: #19161A;
}
.mouth {
width: 234px;
height: 70px;
border-radius: 50%;
background: #FC9202;
left: 52px;
bottom: 35px;
}
.mouth .mark {
width: 160px;
height: 84px;
border: 8px solid #201E1F;
border-left: 1px solid #201E1F;
border-right: 1px solid #201E1F;
border-radius: 50%;
clip: rect(65px 160px 100px 0);
left: 32px;
top: -25px;
}
/*QQ身体*/
.belly {
width: 385px;
height: 322px;
left: 45px;
top: 185px;
z-index: 1;
background: #19161A;
border-radius: 50%;
}
.belly_white {
width: 315px;
height: 250px;
background: #fff;
border-radius: 50%;
left: 34px;
bottom: 10px;
}
/*QQ围巾*/
.scarf {
width: 355px;
height: 198px;
background: red;
border-radius: 50%;
z-index: 5;
left: 60px;
top: 155px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.4), 0 0 30px rgba(0, 0, 0, 0.3) inset;
}
.scarf_d {
width: 80px;
height: 110px;
border-radius: 15px 15px 18px 35px;
background:red;
left: 110px;
top: 325px;
transform: rotate(15deg);
-moz-transform: rotate(15deg);
-webkit-transform: rotate(15deg);
-o-transform: rotate(15deg);
z-index: 4;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4), 0 0 30px rgba(0, 0, 0, 0.3) inset;
}
/*QQ翅膀*/
.leftwing,.rightwing {
width: 50px;
height: 170px;
background: #1A1624;
border-radius: 50%;
top: 270px;
}
.leftwing {
left: 10px;
transform: rotate(25deg);
-moz-transform: rotate(25deg);
-webkit-transform: rotate(25deg);
-o-transform: rotate(25deg);
}
.rightwing {
right: 10px;
transform: rotate(-25deg);
-moz-transform: rotate(-25deg);
-webkit-transform: rotate(-25deg);
-o-transform: rotate(-25deg);
}
/*QQ脚掌*/
.leftsole,.rightsole {
width: 157px;
height: 82px;
background: #F07203;
top: 455px;
border-radius: 50%;
border: 3px solid #872E0C;
box-shadow: 0 0 20px 5px rgba(0, 0, 0, 0.3);
}
.leftsole {
left: 55px;
transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);
}
.rightsole {
right: 55px;
transform: rotate(5deg);
-moz-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
}
.leftsole .toe,.rightsole .toe {
width: 60px;
height: 22px;
background: #F07203;
border-radius: 50%;
border-top: 1px solid #872E0C;
}
.leftsole .toe {
transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
border-left: 3px solid #872E0C;
}
.rightsole .toe {
right: 0;
transform: rotate(20deg);
-moz-transform: rotate(20deg);
-webkit-transform: rotate(20deg);
border-right: 3px solid #872E0C;
}
</style>
</head>
<body>
<div class="qq_body">
<div class="head"></div>
<div class="bowknot">
<div class="bowknot_l">
<div class="bowknot_line3"></div>
<div class="bowknot_line4"></div>
</div>
<div class="bowknot_c"></div>
<div class="bowknot_tip_l"></div>
<div class="bowknot_tip_r"></div>
</div>
<div class="lefteye">
<div class="eyeshadowwhite"></div>
<div class="eyeball">
<div class="eyewhite"></div>
</div>
</div>
<div class="righteye">
<div class="eyeshadow"></div>
<div class="eyeshadowwhite"></div>
<div class="eyeball">
<div class="eyewhite"></div>
</div>
</div>
<div class="mouth_box">
<div class="mouth">
<div class="mark"></div>
</div>
</div>
<div class="belly">
<div class="belly_white"></div>
</div>
<div class="scarf"></div>
<div class="scarf_d"></div>
<div class="leftwing"></div>
<div class="rightwing"></div>
<div class="leftsole">
<div class="toe"></div>
</div>
<div class="rightsole">
<div class="toe"></div>
</div>
</div>
</body>
</html>