css代码：
body { font: 12px Tahoma,arial,sans-serif; margin: 0; padding: 0;}#mask { left: 0; opacity: 0.2; position: absolute; top: 0;}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: 100;}.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:10;}.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:10;}.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:10;}.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:10;}.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:100;}.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: 10;}.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: 0; bottom: 0; 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: 11;}.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: 0; width: 4px;}.mouthTopContainer { height: 29px; left: 39px; overflow: hidden; position: absolute; top: 120px; width: 158px; z-index: 1;}.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: 0; position: absolute; top: 0; width: 158px; z-index: 1;}.mouthBottomContainer { height: 15px; left: 39px; overflow: hidden; position: absolute; top: 146px; width: 158px; z-index: 1;}.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: 0; position: absolute; top: -4px; width: 158px; z-index: 1;}.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: 0; left: -12px; position: absolute; top: 4px; transform: rotate(-60deg); transform-origin: right top 0; width: 0; z-index: 2;}.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: 5;}.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: 5;}.scarfShadow { border-top: 6px solid #000; border-top-left-radius: 90px 120px; border-top-right-radius: 30px; height: 70px; left: 6px; position: absolute; top: 0; 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: 6;}.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: 4;}.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: 4;}.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: 10;}.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: 4;}.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: 3;}.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: 1;}.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: 1;}.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: 3;}.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: 1;}.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: 999;}.footWrapper { left: 80px; position: absolute; top: 292px;}.leftFootTopWrapper { height: 37px; left: -1px; overflow: hidden; position: absolute; top: 16px; width: 130px; z-index: 2;}.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: 10;}.toe.right { left: 264px; transform: rotate(45deg) rotateY(180deg);}.leftFootBottomWrapper { height: 38px; left: -1px; overflow: hidden; position: absolute; top: 52px; width: 130px; z-index: 2;}.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: 2;}.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: 0; 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: 1;} html代码：