您的位置:首页 - 教程 - 网页特效 - 正文
纯HTML和CSS3画QQ的Logo
CSS3绘制腾讯LOGO

效果展示

代码如下:
<!doctype html>
<html>
<head>
<title>纯HTML和CSS3画QQ的Logo_何问起</title>
<style type="text/css">
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;
}
</style>
</head>
<body>
<div id="box">
<div id="head"></div>
<div id="body"></div>
<div id="belly"></div>
<div id="leftFoot" class="foot"></div>
<div id="rightFoot" class="foot"></div>
<div id="leftEye" class="eye"></div>
<div id="rightEye" class="eye"></div>
<div id="leftEyeBall"><div></div></div>
<div id="rightEyeBall"><div></div></div>
<div id="leftHand" class="hand"></div>
<div id="rightHand" class="hand"></div>
<div id="scarf">
<div id="circle"></div>
<div id="leftClip" class="clip"></div>
<div id="rightClip" class="clip"></div>
</div>
<div id="scarf1"></div>
<div id="mouth">
<div id="m_child_0">
<div id="m_child_1">
<div id="m_child_2"></div>
</div>
</div>
<div id="m_child_5">
<div id="m_child_6"></div>
</div>
<div id="m_child_3">
<div id="m_child_4"></div>
</div>
</div>
</div>
</body>
</html>

评论: