html css 联系qq,纯HTML和CSS3画QQ的Logo

纯HTML和CSS3画QQ的Logo_何问起

html, body, div, img {

margin: 0;

padding: 0;

}

#box {

position: absolute;

left: 0;

top: 0;

}

#head {

position: absolute;

left: 135px;

top: 10px;

background: #121214;

width: 127px;

height: 134px;

border-radius: 50%/49%;

z-index: 1;

}

#body {

position: absolute;

left: 128px;

top: 68px;

background: #121214;

width: 141px;

height: 138px;

border-radius: 50%;

}

#belly {

position: absolute;

left: 144px;

top: 79px;

background: #fbfbfb;

width: 110px;

height: 123px;

border-radius: 50%;

}

.foot {

position: absolute;

top: 186px;

background: #febf18;

width: 63px;

height: 30px;

border-radius: 50%;

box-shadow: 0 3px #dc9111;

z-index: -1;

}

#leftFoot {

left: 132px;

transform: rotate(-3deg);

}

#rightFoot {

left: 202px;

transform: rotate(3deg);

}

.eye {

position: absolute;

top: 44px;

width: 24px;

height: 35px;

background: #fff;

border-radius: 50%;

z-index: 2;

}

#leftEye {

left: 170px;

}

#rightEye {

left: 203px;

}

#leftEyeBall {

position: absolute;

left: 180px;

top: 53px;

width: 6px;

height: 14px;

border-radius: 50%;

background: #171718;

border: solid 2px #040305;

z-index: 2;

}

#leftEyeBall > div {

position: absolute;

left: 2px;

top: 1px;

width: 3px;

height: 7px;

border-radius: 50%;

background: #fff;

}

#rightEyeBall {

position: absolute;

left: 206px;

top: 53px;

width: 13px;

height: 13px;

overflow: hidden;

z-index: 2;

}

#rightEyeBall > div {

width: 7px;

height: 14px;

border-radius: 50%;

border: solid 3px #040305;

}

.hand {

position: absolute;

top: 130px;

width: 70px;

height: 23px;

border-radius: 50%;

background: #121214;

}

#leftHand {

left: 91px;

transform: rotate(-70deg);

}

#rightHand {

left: 235px;

transform: rotate(70deg);

}

#scarf {

position: absolute;

left: 123px;

top: 89px;

width: 148px;

height: 55px;

z-index: 2;

border: solid 1px transparent;

overflow: hidden;

}

#scarf1 {

position: absolute;

left: 152px;

top: 117px;

width: 27px;

height: 50px;

z-index: 2;

background: #e32a0e;

border-bottom-right-radius: 5px;

border-bottom-left-radius: 6px;

transform: skewY(8deg) rotate(2deg);

}

#scarf > #circle {

position: absolute;

left: -40px;

top: -233px;

width: 186px;

height: 243px;

border-radius: 50%;

border: solid 22px #e32a0e;

}

#scarf > .clip {

position: absolute;

top: -30px;

width: 20px;

height: 55px;

background: #fff;

}

#leftClip {

left: -7px;

transform: rotate(20deg);

}

#rightClip {

left: 136px;

transform: rotate(-20deg);

}

#mouth {

position: absolute;

left: 157px;

top: 84px;

width: 83px;

height: 22px;

border-radius: 50%;

background: #fdbe18;

z-index: 2;

}

#mouth > #m_child_0 {

margin: 0 auto;

width: 76px;

height: 24px;

border-radius: 50%;

background: #fdbe18;

}

#mouth #m_child_1 {

margin: 0 auto;

width: 60px;

height: 27px;

border-radius: 50%;

background: #fdbe18;

}

#mouth #m_child_2 {

margin: 0 auto;

width: 50px;

height: 29px;

border-radius: 50%;

background: #fdbe18;

}

#mouth #m_child_3 {

position: absolute;

left: 9px;

top: 2px;

width: 66px;

height: 20px;

overflow: hidden;

border-radius: 50%;

}

#mouth #m_child_4 {

position: absolute;

left: -1px;

top: -9px;

width: 68px;

height: 26px;

border-radius: 50%;

box-shadow: 0px 1px 1px #8f3201;

background: #fdbe18;

}

#mouth #m_child_5 {

position: absolute;

left: 21px;

top: 2px;

width: 42px;

height: 22px;

border-radius: 50%;

background: #8f3201;

}

#mouth #m_child_6 {

margin: 1px auto;

width: 30px;

height: 23px;

border-radius: 50%;

background: #8f3201;

}