CSS3 QQ企鹅妹妹
CSS3 QQ企鹅妹妹实例代码：
<!doctype html>
<html>
<head>
<meta 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;}
.eyeshadow{width:66px;height:99px;border-radius:50%;background:rgba(255,153,204,0.9);clip:rect(0 66px 33px 0)}
.eyeshadowwhite{width:65px;height:54px;border-radius:50%;background:rgba(255,255,255,1);top:20px;}
.eyelash_l_1,.eyelash_r_1{width:44px;height:44px;border-bottom:2px solid #F6F;border-radius:50%;top:67px;z-index:8}
.eyelash_l_1{transform:rotate(15deg);-moz-transform:rotate(15deg);-webkit-transform:rotate(15deg);left:120px;}
.eyelash_r_1{transform:rotate(340deg);-moz-transform:rotate(340deg);-webkit-transform:rotate(340deg);right:124px;}
.eyelash_l_2,.eyelash_r_2{width:44px;height:44px;border-radius:50%;top:60px;z-index:8}
.eyelash_l_2{transform:rotate(125deg);-moz-transform:rotate(125deg);-webkit-transform:rotate(125deg);left:123px;border-right:2px solid #F6F;}
.eyelash_r_2{transform:rotate(245deg);-moz-transform:rotate(245deg);-webkit-transform:rotate(245deg);right:124px;border-left:2px solid #F6F;}
/*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蝴蝶结*/
.bowknot{width:200px;height:80px;left:250px;top:0;z-index:9;transform:rotate(35deg);-moz-transform:rotate(35deg);-webkit-transform:rotate(35deg);-o-transform:rotate(35deg);}
.bowknot_l{width:40%;height:80px;background:#F02F72;border-radius:40px 95px 95px 40px;left:0;border:1px solid #F3F;}
.bowknot_c{width:20%;height:60px;background:#F02F72;border-radius:30px;left:30%;top:10px;border:1px solid #F3F;z-index:10;box-shadow:0 0 5px 3px rgba(0,0,0,0.2)}
.bowknot_r{width:40%;height:80px;background:#F02F72;border-radius:95px 40px 40px 95px;left:40%;}
.bowknot_tip_l,.bowknot_tip_r{width:6px;height:35px;border-radius:50%;background:rgba(255,255,255,1);top:20px;z-index:11;}
.bowknot_tip_l{left:-4px;border-right:1px solid #F3F;}
.bowknot_tip_r{right:36px;border-left:1px solid #F3F;}
.bowknot_line1{width:55px;height:25px;border-bottom:3px solid rgba(102,102,102,0.4);transform:rotate(-20deg);-moz-transform:rotate(-10deg);-webkit-transform:rotate(-10deg);-o-transform:rotate(-10deg);top:9px;left:0;border-radius:20%;}
.bowknot_line2{width:45px;height:25px;border-top:2px solid rgba(102,102,102,0.6);transform:rotate(10deg);-moz-transform:rotate(10deg);-webkit-transform:rotate(10deg);-o-transform:rotate(10deg);top:42px;left:0;border-radius:20%;}
.bowknot_line3{width:45px;height:25px;border-bottom:3px solid rgba(102,102,102,0.4);transform:rotate(10deg);-moz-transform:rotate(10deg);-webkit-transform:rotate(10deg);-o-transform:rotate(10deg);top:5px;right:0;border-radius:20%;}
.bowknot_line4{width:55px;height:25px;border-top:1px solid rgba(102,102,102,0.6);transform:rotate(-10deg);-moz-transform:rotate(-10deg);-webkit-transform:rotate(-10deg);-o-transform:rotate(-10deg);top:39px;right:0;border-radius:20%;}
/*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:#F02F72;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:#F02F72;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_r">
<div class="bowknot_line1"></div>
<div class="bowknot_line2"></div>
</div>
<div class="bowknot_tip_l"></div>
<div class="bowknot_tip_r"></div>
</div>
<div class="eyelash_l_1"></div>
<div class="eyelash_l_2"></div>
<div class="eyelash_r_1"></div>
<div class="eyelash_r_2"></div>
<div class="lefteye">
<div class="eyeshadow"></div>
<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>
页:
[1]