QQ-logo
/
index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>CSS3绘制QQ企鹅</title>
	<link rel="stylesheet" href="index.css" />
</head>
<body>
	<header>
		css3 Tencent QQ Logo
		<div class="author">By
			<a href="https://github.com/jianfengtheboy" target="_blank">Sun</a>
		</div>
	</header>
	<!-- QQ Logo box -->
	<div 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="outerWrapper">
				<div class="outer"></div>
			</div>
			<!--围巾-->
			<div class="scarf">
				<div class="scarfShadowLeft"></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>
	</div>
</body>
</html>