CSS3画腾讯QQ图标 无图片和js参考

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代码：

<!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>