css代码：
body {
font: 12px Tahoma,arial,sans-serif;
margin:;
padding:;
}
#mask {
left:;
opacity: 0.2;
position: absolute;
top:;
}
header {
color: #666;
font-family: 'Segoe UI Light','Segoe UI','Microsoft Jhenghei','微软雅黑',sans-serif;
font-size: 50px;
margin-top: 50px;
text-align: center;
}
.con {
display: block;
height: 400px;
margin: 30px auto 0;
position: relative;
width: 840px;
}
#qq,#qqnv{
display: block;
height: 400px;
float:left;
position: relative;
width: 420px;
}
.headflower {
background: none repeat scroll 0 0 ;
/*border: 1px solid #fb0009;*/
/*border-radius: 117px / 117px 117px 68px 68px;*/
position: absolute;
top: -20px;
left: 210px;
width: 108px; height: 65px;
z-index:;
}
.hdj1 {
background: none repeat scroll 0 0 #FF59A1;
border: 1px solid #000;
border-top-left-radius:80%;
border-top-right-radius:50%;
border-bottom-left-radius: 50%;
border-bottom-right-radius:50%;
width:30px;
height:45px;
position:absolute;
left:0px;top:0px;
transform: rotate(-50deg);
transform-origin: 50% 50% 0;
z-index:;
}
.hdj2 {
background: none repeat scroll 0 0 #FF59A1;
border: 1px solid #000;
border-top-left-radius:50%;
border-top-right-radius:50%;
border-bottom-left-radius:80% 30px;
border-bottom-right-radius:10px;
width:30px;
height:45px;
position:absolute;
left:10px;top:0px;
transform: rotate(60deg);
transform-origin: -30% 50% 0;
z-index:;
}
.hdj3 {
background: none repeat scroll 0 0 #FF59A1;
border: 1px solid #000;
border-top-left-radius:50%;
border-top-right-radius:50%;
border-bottom-left-radius: 50%;
border-bottom-right-radius:50%;
width:30px;
height:45px;
position:absolute;
left:50px;top:0px;
transform: rotate(50deg);
transform-origin: 50% 50% 0;
z-index:;
}
.hdj4 {
background: none repeat scroll 0 0 #FF59A1;
border: 1px solid #000;
border-top-left-radius:50%;
border-top-right-radius: 10px;
border-bottom-left-radius: 50%;
border-bottom-right-radius:50%;
width:30px;
height:45px;
position:absolute;
left:50px;top:20px;
transform: rotate(100deg);
transform-origin: 50% 50% 0;
z-index:;
}
.hdj{
background: none repeat scroll 0 0 #FF59A1;
border: 1px solid #000;
/*border-radius: 117px / 117px 117px 68px 68px;*/
border-top-left-radius:80% 33px;
border-top-right-radius:20px;
border-bottom-left-radius:20px 33px;
border-bottom-right-radius:10px;
width:25px;
height:30px;
position:absolute;
left:30px;top:15px;
z-index:;
}
.head {
background: none repeat scroll 0 0 #000;
border: 1px solid #000;
border-radius: 117px / 117px 117px 68px 68px;
height: 185px;
left: 96px;
position: absolute;
top: 18px;
width: 234px;
z-index:;
}
.eye {
background: none repeat scroll 0 0 #fff;
border: 1px solid #000;
border-radius: 50%;
height: 66px;
position: absolute;
width: 44px;
}
/*女qq*/
.eyenv {
/*background: none repeat scroll 0 0 #fff;*/
background: -moz-linear-gradient(left center , #FF59A1, white 50%, #FF59A1) repeat scroll 0 0 rgba(0, 0, 0, 0);
border: 1px solid #000;
border-radius: 50%;
height: 66px;
position: absolute;
width: 44px;
}
.eye2{
background: none repeat scroll 0 0 #fff;
border-radius: 50%;
height: 55px;
position: absolute; left:; bottom:;
width: 44px;
}
.left.eye {
left: 62px;
top: 50px;
}
.right.eye {
left: 123px;
top: 50px;
}
/*女qq*/
.left.eyenv {
left: 62px;
top: 50px;
}
.right.eyenv {
left: 123px;
top: 50px;
}
.innerLeftEye {
background: none repeat scroll 0 0 #000;
border: 1px solid #000;
border-radius: 50%;
height: 24px;
left: 20px;
position: absolute;
top: 20px;
width: 18px;
}
.innerLeftEyenv {
background: none repeat scroll 0 0 #000;
border: 1px solid #000;
border-radius: 50%;
height: 24px;
left: 20px;
position: absolute;
top: 10px;
width: 18px;
}
.innerLeftEye:after,.innerLeftEyenv:after {
background: none repeat scroll 0 0 white;
border-radius: 50%;
content: "";
height: 8px;
left: 9px;
position: absolute;
top: 6px;
width: 6px;
z-index:;
}
.innerRightEye {
background: none repeat scroll 0 0 black;
border-radius: 50% / 90% 90% 10% 10%;
box-shadow: 0 -1px 2px black;
height: 20px;
left: 8px;
position: absolute;
top: 20px;
width: 18px;
}
.innerRightEyenv {
background: none repeat scroll 0 0 black;
border-radius: 50% / 90% 90% 10% 10%;
box-shadow: 0 -1px 2px black;
height: 20px;
left: 8px;
position: absolute;
top: 10px;
width: 18px;
}
.innerRightEye:after,.innerRightEyenv:after {
background: none repeat scroll 0 0 white;
border-top-left-radius: 50% 100%;
border-top-right-radius: 35% 80%;
bottom: -1px;
content: "";
height: 13px;
left: 4px;
position: absolute;
width: 10px;
}
.fix {
background: none repeat scroll 0 0 black;
border-radius: 50%;
height: 4px;
position: absolute;
top: 17px;
width: 4px;
}
.fix:after {
background: none repeat scroll 0 0 black;
border-radius: 50%;
content: "";
height: 4px;
left: 14px;
position: absolute;
top:;
width: 4px;
}
.mouthTopContainer {
height: 29px;
left: 39px;
overflow: hidden;
position: absolute;
top: 120px;
width: 158px;
z-index:;
}
.mouthTop {
background: none repeat scroll 0 0 #ffa600;
border: 1px solid #ffa600;
border-top-left-radius: 45% 34px;
border-top-right-radius: 45% 34px;
height: 34px;
left:;
position: absolute;
top:;
width: 158px;
z-index:;
}
.mouthBottomContainer {
height: 15px;
left: 39px;
overflow: hidden;
position: absolute;
top: 146px;
width: 158px;
z-index:;
}
.mouthBottom {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background: none repeat scroll 0 0 #ffa600;
border-bottom-left-radius: 45% 24px;
border-bottom-right-radius: 45% 24px;
border-color: -moz-use-text-color #ffa600 #ffa600;
border-image: none;
border-right: 1px solid #ffa600;
border-style: none solid solid;
border-width: medium 1px 1px;
height: 24px;
left:;
position: absolute;
top: -4px;
width: 158px;
z-index:;
}
.lips {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background: none repeat scroll 0 0 #ffa600;
border-bottom-left-radius: 50% 100%;
border-bottom-right-radius: 50% 100%;
border-color: -moz-use-text-color #ffa600 #ffa600;
border-image: none;
border-right: 1px solid #ffa600;
border-style: none solid solid;
border-width: medium 1px 1px;
height: 24px;
left: 60px;
position: absolute;
top: 146px;
width: 116px;
}
.lipShadow {
border-bottom: 20px solid transparent;
border-right: 8px solid black;
border-top: 20px solid transparent;
height:;
left: -12px;
position: absolute;
top: 4px;
transform: rotate(-60deg);
transform-origin: right top 0;
width:;
z-index:;
}
.lipShadow.right {
left: 114px;
transform: rotate(60deg) rotateY(180deg);
}
.body {
height: 300px;
left: 48px;
position: absolute;
top: 135px;
width: 326px;
}
.scarf {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background: none repeat scroll 0 0 #fb0009;
border-color: -moz-use-text-color #000 #000;
border-image: none;
border-radius: 30px 38px 50% 50% / 34px 34px 76px 76px;
border-right: 4px solid #000;
border-style: none solid solid;
border-width: medium 4px 4px;
height: 110px;
left: 34px;
position: absolute;
top: -2px;
width: 258px;
z-index:;
}
.scarfnv {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background: none repeat scroll 0 0 #FF59A1;
border-color: -moz-use-text-color #000 #000;
border-image: none;
border-radius: 30px 38px 50% 50% / 34px 34px 76px 76px;
border-right: 4px solid #000;
border-style: none solid solid;
border-width: medium 4px 4px;
height: 110px;
left: 34px;
position: absolute;
top: -2px;
width: 258px;
z-index:;
}
.scarfShadow {
border-top: 6px solid #000;
border-top-left-radius: 90px 120px;
border-top-right-radius: 30px;
height: 70px;
left: 6px;
position: absolute;
top:;
transform: rotate(-79deg);
width: 60px;
}
.scarfShadowRight {
border-bottom-right-radius: 70px;
border-right: 6px solid black;
height: 70px;
left: 143px;
position: absolute;
top: 8px;
width: 100px;
z-index:;
}
.scarfEnd {
background: none repeat scroll 0 0 #fb0009;
border: 3px solid black;
border-bottom-left-radius: 50% 43%;
border-bottom-right-radius: 15px;
border-top-left-radius: 20% 57%;
height: 64px;
left: 74px;
position: absolute;
top: 90px;
width: 52px;
z-index:;
}
.scarfnvEnd {
background: none repeat scroll 0 0 #FF59A1;
border: 3px solid black;
border-bottom-left-radius: 50% 43%;
border-bottom-right-radius: 15px;
border-top-left-radius: 20% 57%;
height: 64px;
left: 74px;
position: absolute;
top: 90px;
width: 52px;
z-index:;
}
.scarfEndShadow {
border-top: 6px solid black;
border-top-left-radius: 30px;
height: 20px;
left: 12px;
position: absolute;
top: 6px;
transform: skewX(4deg) scaleY(1.5) rotate(-60deg);
transform-origin: right top 0;
width: 20px;
z-index:;
}
.innerWrapper {
height: 200px;
left: 30px;
overflow: hidden;
position: absolute;
top: 76px;
width: 280px;
}
.inner {
background: none repeat scroll 0 0 #fff;
border: 1px solid #000;
border-radius: 50%;
height: 210px;
left: 25px;
position: absolute;
top: -71px;
width: 218px;
z-index:;
}
.outterWrapper {
height: 250px;
left: 32px;
overflow: hidden;
position: absolute;
top: 54px;
width: 262px;
}
.outter {
background: none repeat scroll 0 0 #000;
border: 1px solid #000;
border-radius: 125px;
height: 250px;
position: absolute;
top: -84px;
width: 260px;
z-index:;
}
.handWrapper {
left: 7px;
position: absolute;
top: 219px;
}
.leftHandTopContainer {
height: 26px;
left: 50px;
overflow: hidden;
position: absolute;
top: 55px;
transform: rotate(-70deg);
transform-origin: left bottom 0;
width: 118px;
z-index:;
}
.leftHandTop {
background: none repeat scroll 0 0 #000;
border: 1px solid #050346;
border-top-left-radius: 44% 38px;
border-top-right-radius: 56% 33px;
height: 54px;
position: absolute;
width: 128px;
}
.leftHandBottomContainer {
height: 30px;
left: 50px;
overflow: hidden;
position: absolute;
top: 78px;
transform: rotate(-70deg);
transform-origin: left top 0;
width: 100px;
z-index:;
}
.leftHandBottom {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background: none repeat scroll 0 0 #000;
border-bottom-left-radius: 48% 20px;
border-bottom-right-radius: 52% 23px;
border-color: -moz-use-text-color #050346 #050346;
border-image: none;
border-right: 1px solid #050346;
border-style: none solid solid;
border-width: medium 1px 1px;
height: 44px;
position: absolute;
top: -26px;
width: 128px;
}
.rightHandTopContainer {
height: 34px;
left: 240px;
overflow: hidden;
position: absolute;
top: 47px;
transform: rotate(65deg);
transform-origin: right bottom 0;
width: 118px;
z-index:;
}
.rightHandTop {
background: none repeat scroll 0 0 black;
border: 1px solid #050346;
border-top-left-radius: 59% 48px;
border-top-right-radius: 41% 54px;
height: 54px;
left: -30px;
position: absolute;
transform: rotateY(-180deg);
width: 148px;
}
.rightHandBottomContainer {
height: 58px;
left: 248px;
overflow: hidden;
position: absolute;
top: 81px;
transform: rotate(90deg);
transform-origin: right top 0;
width: 110px;
z-index:;
}
.rightHandBottom {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background: none repeat scroll 0 0 black;
border-bottom-right-radius: 100% 40px;
border-color: -moz-use-text-color #000 #000;
border-image: none;
border-right: 1px solid #000;
border-style: none solid solid;
border-width: medium 1px 1px;
height: 28px;
left: 38px;
position: absolute;
top: 1px;
width: 68px;
z-index:;
}
.footWrapper {
left: 80px;
position: absolute;
top: 292px;
}
.leftFootTopWrapper {
height: 37px;
left: -1px;
overflow: hidden;
position: absolute;
top: 16px;
width: 130px;
z-index:;
}
.leftFootTop {
background: none repeat scroll 0 0 #ff9c00;
border: 4px solid black;
border-top-left-radius: 80% 70%;
height: 60px;
left: 3px;
position: absolute;
top: -10px;
width: 120px;
}
.toe {
border-top: 4px solid black;
border-top-left-radius: 10px;
border-top-right-radius: 30px;
height: 20px;
left: 2px;
position: absolute;
top: 50px;
transform: rotate(-45deg);
transform-origin: left top 0;
width: 25px;
z-index:;
}
.toe.right {
left: 264px;
transform: rotate(45deg) rotateY(180deg);
}
.leftFootBottomWrapper {
height: 38px;
left: -1px;
overflow: hidden;
position: absolute;
top: 52px;
width: 130px;
z-index:;
}
.leftFootBottom {
background: none repeat scroll 0 0 #ff9c00;
border: 4px solid #000;
border-radius: 50% / 44% 44% 56% 56%;
height: 60px;
left: 3px;
position: absolute;
top: -30px;
width: 120px;
}
.rightFootTopWrapper {
height: 36px;
left: 134px;
overflow: hidden;
position: absolute;
top: 22px;
width: 134px;
z-index:;
}
.rightFootTop {
background: none repeat scroll 0 0 #ff9c00;
border: 4px solid black;
border-top-right-radius: 32% 65%;
height: 60px;
left: 4px;
position: absolute;
top:;
width: 120px;
}
.rightFootBottomWrapper {
height: 38px;
left: 134px;
overflow: hidden;
position: absolute;
top: 52px;
width: 134px;
}
.rightFootBottom {
background: none repeat scroll 0 0 #ff9c00;
border: 4px solid #000;
border-radius: 50% / 56% 56% 44% 44%;
height: 60px;
left: 3px;
position: absolute;
top: -30px;
width: 120px;
}
.rightToe {
background: none repeat scroll 0 0 #ff9c00;
border: 2px solid #000;
border-radius: 50%;
height: 10px;
left: 210px;
position: absolute;
top: 35px;
transform: rotate(34deg);
transform-origin: right bottom 0;
width: 40px;
z-index:;
}
html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" /> <link href="index.css" rel="stylesheet" />
<title>CSS3 Tencent Tencent QQ </title>
</head>
<body>
<header> CSS3 Tencent QQ 测试-火狐31.0 </header>
<div class="con">
<a id="qq">
<div class='head'>
<div class='left eye'>
<div class="innerLeftEye">
</div>
</div>
<div class='right eye'>
<div class="innerRightEye">
<div class="fix"></div>
</div>
</div>
<div class='mouthTopContainer'>
<div class='mouthTop'></div>
</div>
<div class="mouthBottomContainer">
<div class="mouthBottom"></div>
</div>
<div class="lipsContainer">
<div class="lips">
<div class="lipShadow left">
</div>
<div class="lipShadow right">
</div>
</div>
</div>
</div>
<div class="body">
<div class="innerWrapper">
<div class="inner">
</div>
</div>
<div class="outterWrapper">
<div class='outter'>
</div>
</div>
<div class="scarf">
<div class="scarfShadow">
</div>
<div class="scarfShadowRight">
</div>
</div>
<div class="scarfEnd">
<div class="scarfEndShadow">
</div>
</div>
</div>
<div class="handWrapper">
<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>
<div class='footWrapper'>
<div class="leftFootTopWrapper">
<div class="leftFootTop"> </div>
</div>
<div class="leftFootBottomWrapper">
<div class="leftFootBottom">
</div>
</div>
<div class='toe left'></div>
<div class="rightFootTopWrapper">
<div class="rightFootTop">
</div>
</div>
<div class="rightFootBottomWrapper">
<div class="rightFootBottom">
</div>
</div>
<div class='toe right'></div>
</div>
</a>
<a id="qqnv">
<div class="headflower">
<div class="hdj1"></div>
<div class="hdj2"></div>
<div class="hdj"></div>
<div class="hdj3"></div>
<div class="hdj4"></div>
</div>
<div class='head'>
<div class='left eyenv'>
<div class="eye2">
<div class="innerLeftEyenv">
</div>
</div>
</div>
<div class='right eyenv'>
<div class="eye2">
<div class="innerRightEyenv">
<div class="fix"></div>
</div>
</div>
</div>
<div class='mouthTopContainer'>
<div class='mouthTop'></div>
</div>
<div class="mouthBottomContainer">
<div class="mouthBottom"></div>
</div>
<div class="lipsContainer">
<div class="lips">
<div class="lipShadow left">
</div>
<div class="lipShadow right">
</div>
</div>
</div>
</div>
<div class="body">
<div class="innerWrapper">
<div class="inner">
</div>
</div>
<div class="outterWrapper">
<div class='outter'>
</div>
</div>
<div class="scarfnv">
<div class="scarfShadow">
</div>
<div class="scarfShadowRight">
</div>
</div>
<div class="scarfnvEnd">
<div class="scarfEndShadow">
</div>
</div>
</div>
<div class="handWrapper">
<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>
<div class='footWrapper'>
<div class="leftFootTopWrapper">
<div class="leftFootTop"> </div>
</div>
<div class="leftFootBottomWrapper">
<div class="leftFootBottom">
</div>
</div>
<div class='toe left'></div>
<div class="rightFootTopWrapper">
<div class="rightFootTop">
</div>
</div>
<div class="rightFootBottomWrapper">
<div class="rightFootBottom">
</div>
</div>
<div class='toe right'></div>
</div>
</a>
</div>
</body>
</html>