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 {
470px;
height: 540px;
left: 100px;
top: 100px;
}
/*QQ头部*/

.head {
z-index: 0;
left: 65px;
top: 0;
345px;
height: 367px;
background: #19161A;
border-radius: 50%;
}
/*QQ眼睛*/

.lefteye,.righteye {
66px;
height: 99px;
border-radius: 50%;
background: #fff;
left: 153px;
top: 76px;
z-index: 7;
overflow: hidden;
}

.eyeball {
30px;
height: 42px;
background: #201E1F;
border-radius: 50%;
left: 28px;
top: 34px;
}

.eyeball .eyewhite {
11px;
height: 18px;
background: #fff;
border-radius: 50%;
left: 12px;
top: 12px;
}

.righteye {
left: 245px;
}

.righteye .eyeball {
left: 11px;
}



.eyeshadowwhite {
65px;
height: 54px;
border-radius: 50%;
background: rgba(255, 255, 255, 1);
top: 20px;
}


/*QQ嘴巴*/

.mouth_box {
344px;
height: 188px;
top: 102px;
left: 66px;
border-radius: 50%;
z-index: 6;
background: #19161A;
}

.mouth {
234px;
height: 70px;
border-radius: 50%;
background: #FC9202;
left: 52px;
bottom: 35px;
}

.mouth .mark {
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 {
385px;
height: 322px;
left: 45px;
top: 185px;
z-index: 1;
background: #19161A;
border-radius: 50%;
}

.belly_white {
315px;
height: 250px;
background: #fff;
border-radius: 50%;
left: 34px;
bottom: 10px;
}
/*QQ围巾*/

.scarf {
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 {
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 {
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 {
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 {
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>

原文地址:https://www.cnblogs.com/ll-taj/p/6007634.html