CSS3繪制騰訊QQ企鵝

者：Junting
來源：掘金

開始著手于QQ 企鵝的繪制, 第一步基本框架的繪制。

通過對Logo圖像的觀察，按照層次劃分來組合最終的效果。選擇使用絕對位置position:absolute;來布局各個元素。主要劃分為頭部，身體，圍脖，雙手，雙腳。

對前端有興趣或者正在學(xué)習(xí)web前端的小伙伴，可以私信小編【學(xué)習(xí)】即可免費領(lǐng)取2018最新的一整套系統(tǒng)web前端學(xué)習(xí)教程！

 <!-- QQ Logo box -->
 <div id="qq">
 <!-- 頭 -->
 <div class="head"></div>
 <!-- 身體 -->
 <div class="body"></div>
 <!-- 手 -->
 <div class="handWrapper"></div>
 <!-- 腳 -->
 <div class="footWrapper"></div>
 </div>

基本框架結(jié)構(gòu)就是這樣的，QQ 對于容器是通過絕對定位來對每個元素布局進行設(shè)置的。

QQ Logo容器（畫板）：

/**
 * QQ Logo 繪制
 */
#qq {
 position: relative;
 margin: 0 auto;
 width: 420px;
 height: 400px;
 outline: gold solid 2px;
}

骨架出來了，那我們就開始一步步的進行繪制了，先從頭開始：

繪制 head 前，還是跟步驟1一樣，先對 head 的層次結(jié)構(gòu)劃分清楚，依次為：左眼、右眼、上嘴唇、下嘴唇、嘴唇的層次感體現(xiàn)

 <!-- 頭 -->
<div class="head">
 <!-- 左眼 -->
 <div class="left eye"></div>
 <!-- 右眼 -->
 <div class="right eye"></div>
 <!-- 上嘴唇 -->
 <div class="mouthTopContainer"></div>
 <!-- 下嘴唇 -->
 <div class="mouthBottomContainer"></div>
 <!-- 嘴唇上下層次感 -->
 <div class="lispContainer"></div>
 </div>

繪制 head 的輪廓：

 /* QQ head */
.head {
 position: absolute;
 top: 18px;
 left: 96px;
 width: 234px;
 height: 185px;
 border: 1px solid #000;
 /* 通過對border-radius 圓弧的層度來進行鉤畫 */
 border-top-left-radius: 117px 117px;
 border-top-right-radius: 117px 117px;
 border-bottom-left-radius: 117px 68px;
 border-bottom-right-radius: 117px 68px;
}

圖中為什么圓弧是設(shè)置成 border-bottom-left-radius: 117px 68px; 一般根據(jù)設(shè)計圖出來后導(dǎo)出轉(zhuǎn)成帶有標(biāo)尺圖后，會自動計算出值；如果沒有的話，那就要通過計算了。

然后依次繪制 head 其他結(jié)構(gòu)：

眼睛

/* 眼睛 */
.eye {
 position: absolute;
 width: 44px;
 height: 66px;
 border:1px solid #000;
 border-radius: 50% 50%;
}
.left.eye {
 left: 62px;
 top: 50px;
}
.right.eye {
 left: 132px;
 top: 50px;
}

嘴

/* QQ head -> mouth */
.mouthTopContainer {
 position: absolute;
 top: 120px;
	left: 39px;
 width: 158px;
 height: 29px;
 border: 1px solid #000;
}
.mouthBottomContainer {
 position: absolute;
 top: 146px;
	left: 39px;
 width: 158px;
 height: 15px;
 border: 1px solid #000;
}

到這里基本頭的骨架就出來，然后就是對頭的骨架結(jié)構(gòu)的線條進行修飾，現(xiàn)在太丑了，對吧！

眼睛

<!-- 左眼 -->
<div class="left eye">
 <!-- 眼球 -->
 <div class="innerLeftEye"></div>
 </div>
 <!-- 右眼 -->
 <div class="right eye">
 <!-- 眼球 -->
 <div class="innerRightEye">
 <!-- 月牙眼球兩端圓弧修飾 -->
 <div class="fix"></div>
 </div>
</div>
/* QQ head -> eye */
.eye {
 position: absolute;
 width: 44px;
 height: 66px;
 border:1px solid #000;
 border-radius: 50% 50%;
}
.left.eye {
 left: 62px;
 top: 50px;
}
.right.eye {
 left: 132px;
 top: 50px;
}
.innerLeftEye {
 position: absolute;
 top: 20px;
 left: 20px;
 width: 18px;
 height: 24px;
 border-radius: 50%;
 border: 1px solid #000;
}
.innerLeftEye::after {
 content: "";
 position: absolute;
 top: 6px;
 left: 9px;
 width: 6px;
 height: 8px;
 border: 1px solid #000;
 border-radius: 50%;
}
.innerRightEye {
 position: absolute;
 top: 20px;
 left: 8px;
 /* 月牙眼球外輪廓 */
 width: 18px;
 height: 24px;
 border: 1px solid #000;
 border-top-left-radius: 50% 90%;
 border-top-right-radius: 50% 90%;
 border-bottom-left-radius: 50% 10%;
 border-bottom-right-radius: 50% 10%;
}
.innerRightEye::after {
 content: "";
 position: absolute;
 bottom: -1px;
	left: 4px;
 /* 月牙眼球內(nèi)部輪廓 */
 width: 10px;
 height: 13px;
 border: 1px solid #000;
 border-top-left-radius: 50% 100%;
	border-top-right-radius: 35% 80%;
}
.fix {
 position: absolute;
 top: 17px;
 width: 4px;
 height: 4px;
 border: 1px solid #000;
 border-radius: 50%;
}
.fix:after{
	content: "";
 position: absolute;
 top: 0;
	left: 14px;
	width: 4px;
 height: 4px;
 border: 1px solid #000;
	border-radius: 50%;
}

嘴

<!-- 上嘴唇 -->
<div class="mouthTopContainer">
 <div class="mouthTop"></div>
</div>
<!-- 下嘴唇-->
<div class="mouthBottomContainer">
 <div class="mouthBottom"></div>
</div>
<!-- 嘴唇上下層次感-咬合部位 -->
<div class="lispContainer">
 <div class="lips">
 <div class="lipShadow left">
 </div>
 <div class="lipShadow right">
 </div>
 </div>
</div>
/* QQ head -> mouth */
.mouthTopContainer {
 /* 定位 */
 position: absolute;
 top: 120px;
	left: 39px;
 width: 158px;
 height: 29px;
 overflow: hidden; /* 隱藏超出部分 */
}
.mouthTop {
 /* 上嘴唇輪廓 */
 position: absolute;
 top: 0;
	left: 0;
 width: 158px;
 height: 34px;
 border: 1px solid #000;
 border-top-left-radius: 45% 34px;
	border-top-right-radius: 45% 34px;
}
.mouthBottomContainer {
 position: absolute;
 top: 146px;
	left: 39px;
 width: 158px;
 height: 15px;
 overflow: hidden; /* 隱藏超出部分 */
}
.mouthBottom {
 position: absolute;
 top: -4px;
	left: 0;
 width: 158px;
 height: 24px;
 border: 1px solid #000;
 border-top:none;
 border-bottom-left-radius: 45% 24px;
	border-bottom-right-radius: 45% 24px;
}
/* 嘴唇上下層次感-咬合部位 */
.lispContainer {
 /* 定位 */
 position: absolute;
	top: 146px;
	left: 60px;
 width: 116px;
 height: 24px;
}
.lips {
 position: absolute;
	top: 0;
	left: 0;
 width: 116px;
 height: 24px;
 border: 1px solid #FFA600;
 border-bottom-left-radius: 50% 100%;
	border-bottom-right-radius: 50% 100%;
}

基本 head 輪廓就是這樣了，最后在把右眼眼球部分上個色，來進行層疊覆蓋隱藏

.innerRightEye {
 position: absolute;
 top: 20px;
 left: 8px;
 /* 月牙眼球外輪廓 */
 width: 18px;
 height: 24px;
 /* border: 1px solid #000; */
 border-top-left-radius: 50% 90%;
 border-top-right-radius: 50% 90%;
 border-bottom-left-radius: 50% 10%;
 border-bottom-right-radius: 50% 10%;
 background: black;
	box-shadow: 0 -1px 2px black;
}
.innerRightEye::after {
 content: "";
 position: absolute;
 bottom: -1px;
	left: 4px;
 /* 月牙眼球內(nèi)部輪廓 */
 width: 10px;
 height: 13px;
 /* border: 1px solid #000; */
 border-top-left-radius: 50% 100%;
 border-top-right-radius: 35% 80%;
 background: white;
}
.fix {
 position: absolute;
 top: 19px;
 width: 4px;
 height: 4px;
 /* border: 1px solid #000; */
 border-radius: 50%;
 background: black;
}
.fix:after{
	content: "";
 position: absolute;
 top: 0;
	left: 14px;
	width: 4px;
 height: 4px;
 /* border: 1px solid #000; */
 border-radius: 50%;
 background: black;
}

接下來開始繪制 QQ 的 body 部分，老樣子對 body 進行層次結(jié)構(gòu)劃分：圍巾、圍巾尾、內(nèi)輪廓、外輪廓

<!-- 身體 -->
<div class="body">
 <!-- 內(nèi)輪廓 -->
 <div class="innerWrapper">
 <div class="inner"></div>
 </div>
 <!-- 外輪廓 -->
 <div class="outerWrapper">
 <div class="outer"></div>
 </div>
 <!-- 圍巾 -->
 <div class="scarf"></div>
 <!-- 圍巾尾 -->
 <div class="scarfEnd"></div>
</div>

先各個容器位置布局好

/* QQ body */
.body {
 /* body 容器定位 */
 position: absolute;
 top: 135px;
 left: 48px;
 width: 326px;
 height: 300px;
 /* border: 1px solid #000; */
}
/* QQ body -> scarf */
.scarf {
 position: absolute;
 top: -2px;
 left: 34px;
 width: 258px;
 height: 110px;
 border: 1px solid #000;
 border-top: none;
}
/* QQ body -> scarfEnd */
.scarfEnd {
 position: absolute;
 left: 74px;
 top: 90px;
	width: 52px;
 height: 64px;
 border: 3px solid black;
}
/* QQ body -> innerWrapper */
.innerWrapper {
 /* innerWrapper 容器定位 */
 position: absolute;
 left: 30px;
	top: 76px;
 width: 280px;
 height: 200px;
 border: 1px solid #000;
}
/* QQ body -> outerWrapper */
.outerWrapper{
 /* outerWrapper 容器定位 */
 position: absolute;
	top: 54px;
	overflow: hidden;
 width: 262px;
	left: 32px;
 height: 250px;
 border: 1px solid #000;
}

輪廓線條修正

/* QQ body */
.body {
 /* body 容器定位 */
 position: absolute;
 top: 135px;
 left: 48px;
 width: 326px;
 height: 300px;
 /* border: 1px solid #000; */
}
/* QQ body -> scarf */
.scarf {
 position: absolute;
 top: -2px;
 left: 34px;
 width: 258px;
 height: 110px;
 border: 1px solid #000;
 border-top-left-radius: 30px 34px;
	border-top-right-radius: 38px 34px;
	border-bottom-left-radius: 50% 76px;
 border-bottom-right-radius: 50% 76px;
 border-top: none;
}
/* QQ body -> scarfEnd */
.scarfEnd {
 position: absolute;
 left: 74px;
 top: 90px;
	width: 52px;
 height: 64px;
 border: 3px solid black;
 border-bottom-left-radius: 50% 43%;
	border-bottom-right-radius: 15px;
	border-top-left-radius: 20% 57%;
}
/* QQ body -> innerWrapper */
.innerWrapper {
 /* innerWrapper 容器定位 */
 position: absolute;
 left: 30px;
	top: 76px;
 width: 280px;
 height: 200px;
 overflow: hidden;
}
.inner {
 position: absolute;
 left: 25px;
	top: -71px;
	width: 218px;
	height: 210px;
 border: 1px solid #000;
 border-radius: 50%;
}
/* QQ body -> outerWrapper */
.outerWrapper{
 /* outerWrapper 容器定位 */
 position: absolute;
	top: 54px;
	overflow: hidden;
 width: 262px;
	left: 32px;
 height: 250px;
}
.outer{
 position: absolute;
	top: -84px;
	width: 260px;
 height: 250px;
 border: 1px solid #000;
	border-radius: 125px;
}

大致輪廓基本已經(jīng)出來了，還有一些內(nèi)部線條，等后面在來慢慢繪制。

接下來我們來繪制 hand 部分，安裝老路子層次結(jié)構(gòu)劃分：左手、右手；手的樣子需要通過兩個 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>
/* QQ handWrapper */
.handWrapper{
 /* 定位手的起始點 */
	position: absolute;
	top: 219px;
	left: 7px;
}
/* QQ handWrapper -left */
.leftHandTopContainer {
 /* 定位 */
	position: absolute;
	top: 55px;
	left: 50px;
 width: 118px;
 height: 26px;
 border: 1px solid #000;
	transform-origin: bottom left;
	transform: rotate(-70deg);
}
.leftHandBottomContainer {
 /* 定位 */
 position: absolute;
	top: 78px;
	left: 50px;
	width: 100px;
 height: 30px;
 border: 1px solid #000;
	transform-origin: top left;
	transform: rotate(-70deg);
}
/* QQ handWrapper -right */
.rightHandTopContainer {
 /* 定位 */
 position: absolute;
	top: 47px;
	left: 240px;
 width: 118px;
 height: 34px;
 border: 1px solid #000;
	transform-origin: bottom right;
 transform: rotate(65deg);
}
.rightHandBottomContainer{
 /* 定位 */
 position: absolute;
	top: 81px;
 left: 248px;
	width: 110px;
	height: 58px;
 border: 1px solid #000;
	transform-origin: top right;
	transform: rotate(90deg);
}

線條輪廓修改

/* QQ handWrapper */
.handWrapper{
 /* 定位手的起始點 */
	position: absolute;
	top: 219px;
	left: 7px;
}
/* QQ handWrapper -left */
.leftHandTopContainer {
 /* 定位 */
	position: absolute;
	top: 55px;
	left: 50px;
 width: 118px;
 height: 26px;
 /* border: 1px solid #000; */
	transform-origin: bottom left;
 transform: rotate(-70deg);
 overflow: hidden;
}
.leftHandTop {
 /* 上半部分 */
	width: 128px;
	height: 54px;
 border: 1px solid #050346;
 border-top-left-radius: 44% 38px;
 border-top-right-radius: 56% 33px;
}
.leftHandBottomContainer {
 /* 定位 */
 position: absolute;
	top: 78px;
	left: 50px;
	width: 100px;
 height: 30px;
 /* border: 1px solid #000; */
	transform-origin: top left;
 transform: rotate(-70deg);
 overflow: hidden;
}
.leftHandBottom {
 position: absolute;
 top: -26px;
 width: 128px;
	height: 44px;
 border: 1px solid #050346;
 border-bottom-left-radius: 48% 20px;
	border-bottom-right-radius: 52% 23px;
}
/* QQ handWrapper -right */
.rightHandTopContainer {
 /* 定位 */
 position: absolute;
	top: 47px;
	left: 240px;
 width: 118px;
 height: 34px;
 /* border: 1px solid #000; */
	transform-origin: bottom right;
 transform: rotate(65deg);
 overflow: hidden;
}
.rightHandTop {
 position: absolute;
 left: -30px;
 width: 148px;
	height: 54px;
 border: 1px solid #050346;
 border-top-right-radius: 41% 54px;
 border-top-left-radius: 59% 48px;
}
.rightHandBottomContainer{
 /* 定位 */
 position: absolute;
	top: 81px;
 left: 248px;
	width: 110px;
	height: 58px;
 /* border: 1px solid #000; */
	transform-origin: top right;
 transform: rotate(90deg);
 overflow: hidden;
}
.rightHandBottom {
 position: absolute;
	top: 1px;
	left: 38px;
 width: 68px;
	height: 28px;
 border: 1px solid #000;
 border-bottom-right-radius: 100% 40px;
}

是不是漂亮很多了，那快點把腳的部分也完成吧,和手的結(jié)構(gòu)基本類似。

<!-- 腳 -->
<div class="footWrapper">
 <div class="leftFootTopWrapper">
 <div class="leftFootTop"></div>
 </div>
 <div class="leftFootBottomWrapper">
 <div class="leftFootBottom"></div>
 </div>
 <div class="rightFootTopWrapper">
 <div class="rightFootTop"></div>
 </div>
 <div class="rightFootBottomWrapper">
 <div class="rightFootBottom"></div>
 </div>
</div>

基礎(chǔ)位置布局

/* QQ footerWrapper */
.footWrapper{
 /* 定位起始點 */
	position: absolute;
	top: 292px;
 left: 80px;
 width: 300px;
 height: 80px;
 border: 1px solid #000;
}
/* QQ footerWrapper -> left */
.leftFootTopWrapper {
 /* 定位左腳上容器 */
 position: absolute;
	top: 16px;
	left: -1px;
 width: 130px;
 height: 37px;
 border: 1px solid #000;
}
.leftFootBottomWrapper {
 position: absolute;
 top: 52px;
	left: -1px;
	width: 130px;
	height: 38px;
 border: 1px solid #000;
}
/* QQ footerWrapper -> right */
.rightFootTopWrapper {
 /* 定位左腳上容器 */
 position: absolute;
	top: 22px;
	left: 134px;
 width: 130px;
 height: 38px;
 border: 1px solid #000;
}
.rightFootBottomWrapper {
 position: absolute;
 top: 52px;
	left: 134px;
	width: 134px;
 height: 38px;
 border: 1px solid #000;
}

輪廓調(diào)整

/* QQ footerWrapper */
.footWrapper{
 /* 定位起始點 */
	position: absolute;
	top: 292px;
 left: 80px;
 width: 300px;
 height: 80px;
 /* border: 1px solid #000; */
}
/* QQ footerWrapper -> left */
.leftFootTopWrapper {
 /* 定位左腳上容器 */
 position: absolute;
	top: 16px;
	left: -1px;
 width: 130px;
 height: 37px;
 /* border: 1px solid #000; */
 overflow: hidden;
}
.leftFootTop {
 position: absolute;
	top: -10px;
 left: 3px;
 width: 120px;
	height: 60px;
 border: 4px solid black;
 border-top-left-radius: 80% 70%;
}
.leftFootBottomWrapper {
 position: absolute;
 top: 52px;
	left: -1px;
	width: 130px;
	height: 38px;
 /* border: 1px solid #000; */
 overflow: hidden;
}
.leftFootBottom {
 position: absolute;
 top: -30px;
	left: 3px;
 width: 120px;
	height: 60px;
 border: 4px solid #000;
 border-top-left-radius: 50% 44%;
	border-top-right-radius: 50% 44%;
	border-bottom-left-radius: 50% 56%;
	border-bottom-right-radius: 50% 56%;
}
/* QQ footerWrapper -> right */
.rightFootTopWrapper {
 /* 定位左腳上容器 */
 position: absolute;
	top: 22px;
	left: 134px;
 width: 130px;
 height: 38px;
 /* border: 1px solid #000; */
 overflow: hidden;
}
.rightFootTop {
 position: absolute;
 top: 0px;
	left: 4px;
 width: 120px;
	height: 60px;
 border: 4px solid black;
 border-top-right-radius: 32% 65%;
}
.rightFootBottomWrapper {
 position: absolute;
 top: 52px;
	left: 134px;
	width: 134px;
 height: 38px;
 /* border: 1px solid #000; */
 overflow: hidden;
}
.rightFootBottom {
 position: absolute;
 top: -30px;
	left: 3px;
 width: 120px;
	height: 60px;
 border: 4px solid #000;
 border-top-left-radius: 50% 56%;
	border-top-right-radius: 50% 56%;
	border-bottom-left-radius: 50% 44%;
	border-bottom-right-radius: 50% 44%;
}

基本整體框架結(jié)構(gòu)就出來了，開始上色吧。上色的過程可以幫助我們調(diào)整z-index，也就是各個模塊的重疊層次，遮蓋了一些無用的線條和框角。

head 開始

 /* QQ head */
.head {
 position: absolute;
 top: 18px;
 left: 96px;
 width: 234px;
 height: 185px;
 border: 1px solid #000;
 border-top-left-radius: 117px 117px;
 border-top-right-radius: 117px 117px;
 border-bottom-left-radius: 117px 68px;
 border-bottom-right-radius: 117px 68px;
 background: #000;
}
/* QQ head -> eye */
.eye {
 position: absolute;
 width: 44px;
 height: 66px;
 border:1px solid #000;
 border-radius: 50% 50%;
 background: #fff;
}
.left.eye {
 left: 62px;
 top: 50px;
}
.right.eye {
 left: 132px;
 top: 50px;
}
.innerLeftEye {
 position: absolute;
 top: 20px;
 left: 20px;
 width: 18px;
 height: 24px;
 border-radius: 50%;
 border: 1px solid #000;
 background: #000;
}
.innerLeftEye::after {
 content: "";
 position: absolute;
 top: 6px;
 left: 9px;
 width: 6px;
 z-index: 11;
 height: 8px;
 /* border: 1px solid #000; */
 border-radius: 50%;
 background: #fff;
}
.innerRightEye {
 position: absolute;
 top: 20px;
 left: 8px;
 /* 月牙眼球外輪廓 */
 width: 18px;
 height: 24px;
 /* border: 1px solid #000; */
 border-top-left-radius: 50% 90%;
 border-top-right-radius: 50% 90%;
 border-bottom-left-radius: 50% 10%;
 border-bottom-right-radius: 50% 10%;
 background: black;
 box-shadow: 0 -1px 2px black;
}
.innerRightEye::after {
 content: "";
 position: absolute;
 bottom: -1px;
	left: 4px;
 /* 月牙眼球內(nèi)部輪廓 */
 width: 10px;
 height: 13px;
 /* border: 1px solid #000; */
 border-top-left-radius: 50% 100%;
 border-top-right-radius: 35% 80%;
 background: #FFF;
}
.fix {
 position: absolute;
 top: 19px;
 width: 4px;
 height: 4px;
 /* border: 1px solid #000; */
 border-radius: 50%;
 background: #000;
}
.fix:after{
	content: "";
 position: absolute;
 top: 0;
	left: 14px;
	width: 4px;
 height: 4px;
 /* border: 1px solid #000; */
 border-radius: 50%;
 background: black;
}
/* QQ head -> mouth */
.mouthTopContainer {
 /* 定位 */
 position: absolute;
 top: 120px;
 left: 39px;
 z-index: 1;
 width: 158px;
 height: 29px;
 overflow: hidden; /* 隱藏超出部分 */
}
.mouthTop {
 /* 上嘴唇輪廓 */
 position: absolute;
 top: 0;
 left: 0;
 z-index: 1;
 width: 158px;
 height: 34px;
 border: 1px solid #FFA600;
 border-top-left-radius: 45% 34px;
 border-top-right-radius: 45% 34px;
 background: #FFA600;
}
.mouthBottomContainer {
 position: absolute;
 top: 146px;
 left: 39px;
 z-index: 1;
 width: 158px;
 height: 15px;
 overflow: hidden; /* 隱藏超出部分 */
}
.mouthBottom {
 position: absolute;
 top: -4px;
 left: 0;
 z-index: 1;
 width: 158px;
 height: 24px;
 border: 1px solid #FFA600;
 border-top:none;
 border-bottom-left-radius: 45% 24px;
 border-bottom-right-radius: 45% 24px;
 background: #FFA600;
}
/* 嘴唇上下層次感-咬合部位 */
.lispContainer {
 /* 定位 */
 position: absolute;
	top: 146px;
	left: 60px;
 width: 116px;
 height: 24px;
}
.lips {
 position: absolute;
	top: 0;
	left: 0;
 width: 116px;
 height: 24px;
 border: 1px solid #FFA600;
 border-bottom-left-radius: 50% 100%;
 border-bottom-right-radius: 50% 100%;
 background: #FFA600;
}

body

/* QQ body */
.body {
 /* body 容器定位 */
 position: absolute;
 top: 135px;
 left: 48px;
 width: 326px;
 height: 300px;
 /* border: 1px solid #000; */
}
/* QQ body -> scarf */
.scarf {
 position: absolute;
 top: -2px;
 left: 34px;
 z-index: 5;
 width: 258px;
 height: 110px;
 border: 1px solid #000;
 border-top-left-radius: 30px 34px;
	border-top-right-radius: 38px 34px;
	border-bottom-left-radius: 50% 76px;
 border-bottom-right-radius: 50% 76px;
 border-top: none;
 background: #FB0009;
}
/* QQ body -> scarfEnd */
.scarfEnd {
 position: absolute;
 left: 74px;
 top: 90px;
	width: 52px;
 height: 64px;
 border: 3px solid black;
 border-bottom-left-radius: 50% 43%;
	border-bottom-right-radius: 15px;
 border-top-left-radius: 20% 57%;
 background: #FB0009;
}
/* QQ body -> innerWrapper */
.innerWrapper {
 /* innerWrapper 容器定位 */
 position: absolute;
 left: 30px;
	top: 76px;
 width: 280px;
 height: 200px;
 overflow: hidden;
}
.inner {
 position: absolute;
 left: 25px;
	top: -71px;
	width: 218px;
	height: 210px;
 border: 1px solid #000;
 border-radius: 50%;
 background: #fff;
}
/* QQ body -> outerWrapper */
.outerWrapper{
 /* outerWrapper 容器定位 */
 position: absolute;
	top: 54px;
	overflow: hidden;
 width: 262px;
	left: 32px;
 height: 250px;
}
.outer{
 position: absolute;
	top: -84px;
	width: 260px;
 height: 250px;
 border: 1px solid #000;
 border-radius: 125px;
 background: #000;
}

上色后你會發(fā)現(xiàn)，有的圖層顯示先后順序不對，需要調(diào)整下先后順序。

head > body
body里（scafEnd > inner > outer）

hand

/* QQ handWrapper -left */
.leftHandTopContainer {
 /* 定位 */
	position: absolute;
	top: 55px;
	left: 50px;
 width: 118px;
 height: 26px;
 /* border: 1px solid #000; */
	transform-origin: bottom left;
 transform: rotate(-70deg);
 overflow: hidden;
}
.leftHandTop {
 /* 上半部分 */
	width: 128px;
	height: 54px;
 border: 1px solid #050346;
 border-top-left-radius: 44% 38px;
 border-top-right-radius: 56% 33px;
 background: #000;
}
.leftHandBottomContainer {
 /* 定位 */
 position: absolute;
	top: 78px;
	left: 50px;
	width: 100px;
 height: 30px;
 /* border: 1px solid #000; */
	transform-origin: top left;
 transform: rotate(-70deg);
 overflow: hidden;
}
.leftHandBottom {
 position: absolute;
 top: -26px;
 width: 128px;
	height: 44px;
 border: 1px solid #050346;
 border-bottom-left-radius: 48% 20px;
 border-bottom-right-radius: 52% 23px;
 background: #000;
}
/* QQ handWrapper -right */
.rightHandTopContainer {
 /* 定位 */
 position: absolute;
	top: 47px;
	left: 240px;
 width: 118px;
 height: 34px;
 /* border: 1px solid #000; */
	transform-origin: bottom right;
 transform: rotate(65deg);
 overflow: hidden;
}
.rightHandTop {
 position: absolute;
 left: -30px;
 width: 148px;
	height: 54px;
 border: 1px solid #050346;
 border-top-right-radius: 41% 54px;
 border-top-left-radius: 59% 48px;
 background: #000;
}
.rightHandBottomContainer{
 /* 定位 */
 position: absolute;
	top: 81px;
 left: 248px;
	width: 110px;
	height: 58px;
 /* border: 1px solid #000; */
	transform-origin: top right;
 transform: rotate(90deg);
 overflow: hidden;
}
.rightHandBottom {
 position: absolute;
	top: 1px;
	left: 38px;
 width: 68px;
	height: 28px;
 border: 1px solid #000;
 border-bottom-right-radius: 100% 40px;
 background: #000;
}

footer

/* QQ footerWrapper */
.footWrapper{
 /* 定位起始點 */
	position: absolute;
	top: 292px;
 left: 80px;
 width: 300px;
 height: 80px;
 /* border: 1px solid #000; */
}
/* QQ footerWrapper -> left */
.leftFootTopWrapper {
 /* 定位左腳上容器 */
 position: absolute;
	top: 16px;
	left: -1px;
 width: 130px;
 height: 37px;
 /* border: 1px solid #000; */
 overflow: hidden;
}
.leftFootTop {
 position: absolute;
	top: -10px;
 left: 3px;
 width: 120px;
	height: 60px;
 border: 4px solid black;
 border-top-left-radius: 80% 70%;
 background: #FF9C00;
}
.leftFootBottomWrapper {
 position: absolute;
 top: 52px;
	left: -1px;
	width: 130px;
	height: 38px;
 /* border: 1px solid #000; */
 overflow: hidden;
}
.leftFootBottom {
 position: absolute;
 top: -30px;
	left: 3px;
 width: 120px;
	height: 60px;
 border: 4px solid #000;
 border-top-left-radius: 50% 44%;
	border-top-right-radius: 50% 44%;
	border-bottom-left-radius: 50% 56%;
 border-bottom-right-radius: 50% 56%;
 background: #FF9C00;
}
/* QQ footerWrapper -> right */
.rightFootTopWrapper {
 /* 定位左腳上容器 */
 position: absolute;
	top: 22px;
	left: 134px;
 width: 130px;
 height: 38px;
 /* border: 1px solid #000; */
 overflow: hidden;
}
.rightFootTop {
 position: absolute;
 top: 0px;
	left: 4px;
 width: 120px;
	height: 60px;
 border: 4px solid black;
 border-top-right-radius: 32% 65%;
 background: #FF9C00;
}
.rightFootBottomWrapper {
 position: absolute;
 top: 52px;
	left: 134px;
	width: 134px;
 height: 38px;
 /* border: 1px solid #000; */
 overflow: hidden;
}
.rightFootBottom {
 position: absolute;
 top: -30px;
	left: 3px;
 width: 120px;
	height: 60px;
 border: 4px solid #000;
 border-top-left-radius: 50% 56%;
	border-top-right-radius: 50% 56%;
	border-bottom-left-radius: 50% 44%;
 border-bottom-right-radius: 50% 44%;
 background: #FF9C00;
}

到了這里基本完成了 90% 了，剩下的就是線條優(yōu)化，使 QQ 看起來更有層次感、立體感。

嘴唇

嘴巴的形狀不夠性感、立體；繪制一個斜邊三角形，修復(fù)嘴唇的層次感。

繪制這樣一個斜邊三角形，步驟分解如圖所示：

先是繪制一個普通三角形，通過逆時針旋轉(zhuǎn)得到一個修復(fù)三角形，那么相對稱的修復(fù)三角形可以通過使用rotateY，繞著Y軸旋轉(zhuǎn)180度，來得到。

<!-- 嘴唇上下層次感 -->
<div class="lispContainer">
 <div class="lips">
 <!-- 左右上下嘴唇咬合陰影 -->
 <div class="lipShadow left"></div>
 <div class="lipShadow right"></div>
 </div>
</div>
/* 嘴唇上下層次感-咬合部位 */
.lispContainer {
 /* 定位 */
 position: absolute;
	top: 146px;
	left: 60px;
 width: 116px;
 height: 24px;
}
.lips {
 position: absolute;
	top: 0;
	left: 0;
 width: 116px;
 height: 24px;
 border: 1px solid #FFA600;
 border-bottom-left-radius: 50% 100%;
 border-bottom-right-radius: 50% 100%;
 background: #FFA600;
}
.lipShadow {
 position: absolute;
 width: 0px;
 height: 0px;
 border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
	border-right: 8px solid black;
	transform-origin: top right;
 transform: rotate(-60deg);
 z-index: 2;
}
.lipShadow.left {
 top: 4px;
 left: -12px;
 transform: rotate(-60deg);
}
.lipShadow.right {
 top: 4px;
 left: 111px;
 transform: rotate(60deg) rotateY(180deg);
}

圍巾

圍脖竟然沒折痕，不立體；通過繪制一個“小尾巴”來進行美化

border-right: 6px solid black;
width: 100px;
height: 70px;
border-bottom-right-radius: 70px 70px;

當(dāng)對一個角應(yīng)用圓角樣式，如果這個角相鄰的兩個border一個有定義而一個無定義，那么繪制的結(jié)果就是由粗到細的“小尾巴了”。[在整個繪制過程中，同一個圖形它的繪制方法有很多種，例如一個矩形可以用 width x height構(gòu)成，也可以由border x height(width)構(gòu)成，甚至可以由border組合(width=height=0)構(gòu)成，根據(jù)情況選擇吧。]

<!-- 圍巾 -->
<div class="scarf">
 <div class="scarfShadow"></div>
 <div class="scarfShadowRight"></div>
</div>
<!-- 圍巾尾 -->
<div class="scarfEnd">
 <div class="scarfEndShadow"></div>
</div>
</div>
/* QQ body -> scarf */
.scarf {
 position: absolute;
 top: -2px;
 left: 34px;
 z-index: 5;
 width: 258px;
 height: 110px;
 border: 4px solid #000;
 border-top-left-radius: 30px 34px;
	border-top-right-radius: 38px 34px;
	border-bottom-left-radius: 50% 76px;
 border-bottom-right-radius: 50% 76px;
 border-top: none;
 background: #FB0009;
}
.scarfShadowLeft {
 position: absolute;
 top: 0px;
	left: 6px;
	width: 60px;
 height: 70px;
 /* border: 4px solid #000; */
 border-top: 6px solid #000;
	border-top-left-radius: 90px 120px;
 border-top-right-radius: 30px 30px;
	transform: rotate(-79deg);
}
.scarfShadowRight {
 position: absolute;
 top: 8px;
	left: 143px;
	width: 100px;
 height: 70px;
 /* border: 4px solid #000; */
 border-right: 6px solid black;
	width: 100px;
 border-bottom-right-radius: 70px 70px;
 border-right: 6px solid black;
}
/* QQ body -> scarfEnd */
.scarfEnd {
 position: absolute;
 left: 74px;
 top: 90px;
	width: 52px;
 height: 64px;
 border: 3px solid black;
 border-bottom-left-radius: 50% 43%;
	border-bottom-right-radius: 15px;
 border-top-left-radius: 20% 57%;
 background: #FB0009;
 z-index: 4;
}
.scarfEndShadow {
 position: absolute;
 top: 6px;
	left: 12px;
	width: 20px;
 height: 20px;
 /* border: 4px solid #000; */
 border-top: 6px solid #000;
 border-top-left-radius: 30px 30px;
 transform-origin: top right;
 transform: skewX(4deg) scaleY(1.5) rotate(-60deg);
}

腳

也是通過繪制小尾巴來進行美化

<!-- 腳 -->
<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>
/* QQ footerWrapper */
.footWrapper{
 /* 定位起始點 */
	position: absolute;
	top: 292px;
 left: 80px;
 width: 300px;
 height: 80px;
 /* border: 1px solid #000; */
}
.toe {
 position: absolute;
	width: 25px;
	height: 20px;
 /* border: 4px solid #000; */
 border-top: 4px solid black;
 border-top: 4px solid black;
 border-top-right-radius: 30px 30px;
 border-top-left-radius: 10px 10px;
 transform-origin: top left;
 z-index: 10;
}
/* QQ footerWrapper -> left */
.leftFootTopWrapper {
 /* 定位左腳上容器 */
 position: absolute;
	top: 16px;
	left: -1px;
 width: 130px;
 height: 37px;
 /* border: 1px solid #000; */
 overflow: hidden;
}
.leftFootTop {
 position: absolute;
	top: -10px;
 left: 3px;
 width: 120px;
	height: 60px;
 border: 4px solid black;
 border-top-left-radius: 80% 70%;
 background: #FF9C00;
}
.toe.left {
 top: 50px;
 left: 2px;
 transform: rotate(-45deg);
}
.leftFootBottomWrapper {
 position: absolute;
 top: 52px;
	left: -1px;
	width: 130px;
	height: 38px;
 /* border: 1px solid #000; */
 overflow: hidden;
}
.leftFootBottom {
 position: absolute;
 top: -30px;
	left: 3px;
 width: 120px;
	height: 60px;
 border: 4px solid #000;
 border-top-left-radius: 50% 44%;
	border-top-right-radius: 50% 44%;
	border-bottom-left-radius: 50% 56%;
 border-bottom-right-radius: 50% 56%;
 background: #FF9C00;
}
/* QQ footerWrapper -> right */
.rightFootTopWrapper {
 /* 定位左腳上容器 */
 position: absolute;
	top: 22px;
	left: 134px;
 width: 130px;
 height: 38px;
 /* border: 1px solid #000; */
 overflow: hidden;
}
.rightFootTop {
 position: absolute;
 top: 0px;
	left: 4px;
 width: 120px;
	height: 60px;
 border: 4px solid black;
 border-top-right-radius: 32% 65%;
 background: #FF9C00;
}
.toe.right {
 top: 50px;
 left: 264px;
 transform: rotate(45deg) rotateY(180deg);
}
.rightFootBottomWrapper {
 position: absolute;
 top: 52px;
	left: 134px;
	width: 134px;
 height: 38px;
 /* border: 1px solid #000; */
 overflow: hidden;
}
.rightFootBottom {
 position: absolute;
 top: -30px;
	left: 3px;
 width: 120px;
	height: 60px;
 border: 4px solid #000;
 border-top-left-radius: 50% 56%;
	border-top-right-radius: 50% 56%;
	border-bottom-left-radius: 50% 44%;
 border-bottom-right-radius: 50% 44%;
 background: #FF9C00;
}

大功告成，一個生動的 QQ 企鵝就繪制完了～

對前端有興趣或者正在學(xué)習(xí)web前端的小伙伴，可以私信小編【學(xué)習(xí)】即可免費領(lǐng)取2018最新的一整套系統(tǒng)web前端學(xué)習(xí)教程！

介紹下這個過程中幾個比較典型的圖形繪制方法：

1、企鵝的眼睛：橢圓，直接設(shè)置border-radius:50% 50%; 即可[因為寬高分別為44px和66px，所以也可以這樣設(shè)定：border-radius: 22px / 33px]

2、圍脖的尾部：一個圓角各異的矩形，所以這里需要對幾個角分別設(shè)定border-radius，微調(diào)的結(jié)果為

border-bottom-left-radius: 50% 43%;
border-bottom-right-radius: 15px;
border-top-left-radius: 20% 57%;

3、企鵝的胳膊：手的繪制較為麻煩一點，可以分為上下兩個部分，將繪制的結(jié)果拼接到一起。那么對于不需要的部分怎么辦呢？我們可以將上(下)部分放到一個div(container)中，利用overflow:hidden的屬性來截取所要的部分。繪制復(fù)雜圖形的時候常用的方法就是切割和拼接，將圖形切割成一個個簡單的小塊，通過層疊和旋轉(zhuǎn)變化進行組合。

使用transform:rotate(deg)的時候，優(yōu)先設(shè)定transform-origin屬性，會比較方便。設(shè)定的點作為中心點，整個圖形繞著這個點進行角度變化。例如：transform-origin:bottom left，使用左下角作為原點。也可以使用具體的像素值和百分比。

在基本的框架線條中比非常多的使用了border-radius用于構(gòu)造各種曲線條，小企鵝是圓圓胖胖的，:)

面新聞、華西都市報的原創(chuàng)稿件，一直被大量網(wǎng)站、移動客戶端等平臺轉(zhuǎn)載，通過封巢智媒體的全網(wǎng)數(shù)據(jù)監(jiān)控、文圖及視頻對比分析、稿件來源追蹤、傳播路徑分析、以及媒體白名單篩選等技術(shù)手段，現(xiàn)將8月11日-8月20日期間未經(jīng)授權(quán)轉(zhuǎn)載封面新聞、華西都市報原創(chuàng)稿件的部分平臺予以公布，請相關(guān)侵權(quán)網(wǎng)站、移動客戶端等平臺立即停止侵權(quán)行為，封面新聞、華西都市報保留進一步追究其相應(yīng)侵權(quán)責(zé)任的權(quán)利。

部分侵權(quán)轉(zhuǎn)載平臺如下:

1、搜狐網(wǎng)

未經(jīng)許可侵權(quán)轉(zhuǎn)載封面新聞原創(chuàng)稿件《4名女子自駕川西墜江過路車行車記錄儀拍下墜江瞬間》、《4名成都女子自駕川西墜江2死2失蹤其中3人是同事》、《兩年輕女子點遍火鍋店特色菜吃完后拔腿就跑》等稿件文圖50篇137次，且修改了稿件標(biāo)題及來源。部分侵權(quán)稿件鏈接為：

http://www.sohu.com/a/247283951_420076

http://www.sohu.com/a/248619686_578875

http://www.sohu.com/a/246479257_100163025

2、快資訊

未經(jīng)許可侵權(quán)轉(zhuǎn)載封面新聞原創(chuàng)稿件《首屆中國大熊貓國際文化周來啦，這份攻略不可錯過！》、《蘭州到成都，95后“準(zhǔn)大學(xué)生”騎行近千公里入學(xué)：雖千萬里吾往矣海特高新董事長李飆：航空培訓(xùn)領(lǐng)域“掘金” 從新加坡輻射東南亞》等13篇稿件文圖且修改了稿件標(biāo)題及來源。部分侵權(quán)稿件鏈接為：

https://sh.qihoo.com/9d04460763d8c0943?refer_scene=\u0026scene=1\u0026sign=look\u0026uid=dc9322863ae4625ce877f34b01290a2d

https://sh.qihoo.com/96831735fa330b902?refer_scene=\u0026scene=1\u0026sign=look\u0026uid=dc9322863ae4625ce877f34b01290a2d

https://sh.qihoo.com/915c0e766ade82df2?refer_scene=\u0026scene=1\u0026sign=look\u0026uid=dc9322863ae4625ce877f34b01290a2d

3、華人頭條移動端

未經(jīng)許可侵權(quán)轉(zhuǎn)載封面新聞原創(chuàng)稿件《4歲女孩抓起爸爸的手機扔進大海只因他在手機上花太多時間》、《女子被刺傷后手捂脖子大聲呼救傷人男子跳入江中》、《德牧未拴繩咬傷13歲少年警方：狗主人拘留10日罰款500元》等11篇稿件文圖，且修改了稿件標(biāo)題及來源。部分侵權(quán)稿件鏈接為：

http://www.52hrtt.com/webservicepage_getInformationPage.do?id=G1533892440939&areaId=47&languageId=1&behaviorSource=4

http://www.52hrtt.com/webservicepage_getInformationPage.do?id=G1533893069976&areaId=47&languageId=1&behaviorSource=4

4、獵豹瀏覽器移動端

未經(jīng)許可侵權(quán)轉(zhuǎn)載封面新聞原創(chuàng)稿件《4名成都女子自駕川西墜江2死2失蹤其中3人是同事》、《當(dāng)"中國速度"遇上"馬來下午茶" 川企“出?！钡碾y與甜》、《4名女子自駕川西墜江過路車行車記錄儀拍下墜江瞬間》等8篇稿件文圖，且修改了稿件標(biāo)題及來源。部分侵權(quán)稿件鏈接為：

http://m.news.liebao.cn/detail.html?newsid=gLfjeLxdWmuzaeiINIsyEQ

http://m.news.liebao.cn/detail.html?newsid=L-tgETJFWi6jVKHQ5VeDFA

http://m.news.liebao.cn/detail.html?newsid=jNRNduhYVdKl28lHIh6YWQ

5、悅頭條移動端

未經(jīng)許可侵權(quán)轉(zhuǎn)載封面新聞原創(chuàng)稿件《蘭州到成都，95后“準(zhǔn)大學(xué)生”騎行近千公里入學(xué)：雖千萬里吾往矣》、《4名女子自駕川西墜江過路車行車記錄儀拍下墜江瞬間》、《外賣餐墊上印尋人啟事店主：既為公益也有商業(yè)考慮》等5篇稿件文圖且修改了稿件標(biāo)題及來源。部分侵權(quán)稿件鏈接為：

https://cpu.baidu.com/api/1022/c54006e0/detail/21934382545673802/news

https://cpu.baidu.com/api/1022/c54006e0/detail/21792077125819907/news

https://cpu.baidu.com/api/1022/c54006e0/detail/21778175793077737/news

6、快頭條移動端

未經(jīng)許可侵權(quán)轉(zhuǎn)載封面新聞原創(chuàng)稿件《的哥帶生病兒子跑出租，婉拒更多捐助：我靠跑車能過下去》、《蘭州到成都，95后“準(zhǔn)大學(xué)生”騎行近千公里入學(xué)：雖千萬里吾往矣》、《金沙考古成都展進入倒計時快去刷成都“最牛考古成績單”》等5篇稿件文圖且修改了稿件標(biāo)題及來源。部分侵權(quán)稿件鏈接為：

http://red.iatu.cn/enjya/jinShare?forward=1&aid=cmpp_041280045118013

http://red.iatu.cn/enjya/jinShare?forward=1&aid=sub_74256188

http://red.iatu.cn/enjya/jinShare?forward=1&aid=cmpp_033200059850190

7、唔哩移動端

未經(jīng)許可侵權(quán)轉(zhuǎn)載封面新聞原創(chuàng)稿件《青少年牙齦炎最常見專家：每年至少進行一次口腔檢查》等3篇稿件文圖且修改了稿件標(biāo)題及來源。部分侵權(quán)稿件鏈接為：

http://api.9idudu.com/sdk/wuli1/app/share/share.html?appId=ff6960eda7823d43d85f177043c7351e&appSecret=15ee5fd2dddfeb39df3e853d412b1608&messageId=9a216e2faf68e97c&messageType=NEWS&parentId=30&rt=channel&userId=a327cbd3c95bac0e8415e0c43c8738ec

8、今訊網(wǎng)

未經(jīng)許可侵權(quán)轉(zhuǎn)載封面新聞原創(chuàng)稿件《德牧未拴繩咬傷13歲少年警方：狗主人拘留10日罰款500元》、《女子被刺傷后手捂脖子大聲呼救傷人男子跳入江中》、《巴西樹懶媽媽懷子“偷渡”成都四川首只樹懶寶寶誕生》等文圖且修改了稿件標(biāo)題及來源。侵權(quán)稿件鏈接為：

http://news.jinxun.cc/20180814/0671546.html

http://news.jinxun.cc/20180813/0670935.html

為規(guī)范網(wǎng)絡(luò)轉(zhuǎn)載行為，制止非法侵權(quán)轉(zhuǎn)載，現(xiàn)鄭重公告如下：

1、封面?zhèn)髅较聦俚姆饷嫘侣劸W(wǎng)、封面新聞客戶端、封面新聞新浪微博、封面新聞微信公眾號上發(fā)布的標(biāo)題下方署名為“封面新聞”、“華西都市報”、“封面新聞-華西都市報” 、““封面新聞、華西都市報””的所有內(nèi)容以及華西都市報下屬的華西都市報紙質(zhì)版、電子版、華西都市報新浪微博、華西都市報微信公眾號上發(fā)布的標(biāo)題下方署名為“華西都市報”的所有內(nèi)容，包括但不限于文字報道、圖片、音頻、視頻、直播等內(nèi)容，均受《中華人民共和國著作權(quán)法》等有關(guān)法律法規(guī)中有關(guān)著作權(quán)或其他財產(chǎn)所有權(quán)的法律保護，為“封面?zhèn)髅健薄ⅰ叭A西都市報”及/或相關(guān)權(quán)利人專屬所有或持有。

2、任何單位及個人，凡在互聯(lián)網(wǎng)、移動客戶端、微博和微信等平臺上使用封面?zhèn)髅交蛘呷A西都市報擁有版權(quán)的作品，須事先取得封面?zhèn)髅交蛘呷A西都市報的授權(quán)后方可使用和轉(zhuǎn)載，未經(jīng)授權(quán)任何人不得復(fù)制、轉(zhuǎn)載、摘編、發(fā)行、廣播、信息網(wǎng)絡(luò)傳播、表演、建立鏡像等。擅自使用封面?zhèn)髅交蛘呷A西都市報版權(quán)作品，封面?zhèn)髅?、華西都市報將在其官網(wǎng)公告侵權(quán)人及其侵權(quán)行為。

3、本公告自發(fā)布后，侵權(quán)人繼續(xù)侵權(quán)，封面?zhèn)髅?、華西都市報將采取包括但不限于向國家版權(quán)行政主管部門舉報，向人民法院提起侵權(quán)訴訟等多種措施以維護著作權(quán)人的合法權(quán)益。屆時產(chǎn)生的一切后果由侵權(quán)人承擔(dān)。

4、對于未經(jīng)許可的各類非法轉(zhuǎn)載行為，任何單位及個人均有權(quán)舉報，我們將對舉報者的相關(guān)信息予以嚴(yán)格保密。

封面新聞、華西都市報版權(quán)事務(wù)聯(lián)系電話：028-86969467

封面?zhèn)髅?華西都市報社

2018年8月21日

【如果您有新聞線索，歡迎向我們報料，一經(jīng)采納有費用酬謝。報料微信關(guān)注：ihxdsb，報料QQ：3386405712】

多網(wǎng)站都掛著騰訊的營銷QQ在線咨詢代碼，不過看來看去都是那么幾個樣式，沒辦法，因為騰訊營銷QQ的樣式一共就6種，而且還不怎么好看，雖然騰訊官方有提供API，不過并不多人會專門利用它做個更好看的樣式。今天筆者正巧用到，就順便研究了下，其實還是很簡單的，插入3處代碼，剩下的就是正常的css樣式而已，下面是步驟。

1.進入營銷QQ的頁面版后臺

“在線代碼生成”，然后點擊“在線咨詢API接入”

2.獲取在線咨詢ID

這里點擊“生成代碼”（如需開發(fā)者API文檔請見：https://id.b.qq.com/combo/account/bizqq/wpa/WPAOpenAPI.pdf）

3. 添加引用

請在要顯示在線咨詢圖標(biāo)的頁面中粘貼以下代碼，以引用頁面。

4. 設(shè)置咨詢圖標(biāo)ID

請在在線咨詢圖標(biāo)所在網(wǎng)頁標(biāo)簽中設(shè)置id屬性，以使您指定的圖片或div成為可使用的在線咨詢圖標(biāo)

這里可以是任何的html標(biāo)簽，如a 、span、H2等等，id每個人都不一樣

5. 插入功能代碼

請在要顯示在線咨詢圖標(biāo)的頁面源代碼末尾粘貼以下代碼，以實現(xiàn)在線咨詢功能。

BizQQWPA.addCustom({aty: '0', a: '0', nameAccount: 4008885159, selector: 'BizQQWPA'});

文/WingsBlog

在線咨詢

上一篇：jango 2 筆記之models（4）
下一篇：是我姿勢不對？筆記本10小時續(xù)航就是個傳說

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

CSS3繪制騰訊QQ企鵝

對前端有興趣或者正在學(xué)習(xí)web前端的小伙伴，可以私信小編【學(xué)習(xí)】即可免費領(lǐng)取2018最新的一整套系統(tǒng)web前端學(xué)習(xí)教程！

對前端有興趣或者正在學(xué)習(xí)web前端的小伙伴，可以私信小編【學(xué)習(xí)】即可免費領(lǐng)取2018最新的一整套系統(tǒng)web前端學(xué)習(xí)教程！

您的項目需求

對前端有興趣或者正在學(xué)習(xí)web前端的小伙伴，可以私信小編【學(xué)習(xí)】即可免費領(lǐng)取2018最新的一整套系統(tǒng)web前端學(xué)習(xí)教程！