CSS3繪製騰訊QQ企鵝

Junting發表於2018-05-16

繪製我們的企鵝

前提，你已經看過CSS3繪製圖形基本原理一文，已對一些基本圖形繪製瞭解。

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

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

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

基本框架結構就是這樣的，QQ 對於容器是通過絕對定位來對每個元素佈局進行設定的。

QQ Logo容器（畫板）：

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

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

繪製 head 前，還是跟步驟1一樣，先對 head 的層次結構劃分清楚，依次為：左眼、右眼、上嘴脣、下嘴脣、嘴脣的層次感體現

 <!-- 頭 -->
<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;
}
複製程式碼

圖中為什麼圓弧是設定成 border-bottom-left-radius: 117px 68px; 一般根據設計圖出來後匯出轉成帶有標尺圖後，會自動計算出值；如果沒有的話，那就要通過計算了。

然後依次繪製 head 其他結構：

眼睛


/* 眼睛 */
.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;
}
複製程式碼

到這裡基本頭的骨架就出來，然後就是對頭的骨架結構的線條進行修飾，現在太醜了，對吧！

眼睛

<!-- 左眼 -->
<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;
    /* 月牙眼球內部輪廓 */
    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;
    /* 月牙眼球內部輪廓 */
    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 進行層次結構劃分：圍巾、圍巾尾、內輪廓、外輪廓

<!-- 身體 -->
<div class="body">
    <!-- 內輪廓 -->
    <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;
}

複製程式碼

大致輪廓基本已經出來了，還有一些內部線條，等後面在來慢慢繪製。

接下來我們來繪製 hand 部分，安裝老路子層次結構劃分：左手、右手；手的樣子需要通過兩個 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;
}

複製程式碼

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

<!-- 腳 -->
<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>
複製程式碼

基礎位置佈局

/* 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;
}

複製程式碼

輪廓調整


/* 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%;
}

複製程式碼

基本整體框架結構就出來了，開始上色吧。上色的過程可以幫助我們調整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;
    /* 月牙眼球內部輪廓 */
    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;
}
複製程式碼

上色後你會發現，有的圖層顯示先後順序不對，需要調整下先後順序。

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% 了，剩下的就是線條優化，使 QQ 看起來更有層次感、立體感。

嘴脣

嘴巴的形狀不夠性感、立體；繪製一個斜邊三角形，修復嘴脣的層次感。

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

先是繪製一個普通三角形，通過逆時針旋轉得到一個修復三角形，那麼相對稱的修復三角形可以通過使用rotateY，繞著Y軸旋轉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;
複製程式碼

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

<!-- 圍巾 -->
<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 企鵝就繪製完了～

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

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

2、圍脖的尾部：一個圓角各異的矩形，所以這裡需要對幾個角分別設定border-radius，微調的結果為

border-bottom-left-radius: 50% 43%;
border-bottom-right-radius: 15px;
border-top-left-radius: 20% 57%;
複製程式碼

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

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

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

本文參考

原始碼

css3繪製QQ企鵝圖示程式碼例項
2017-03-01
CSSS3
css3 繪製畫圓、扇形
2019-01-05
CSSS3
CSS3繪製圖形圖案效果
2018-07-20
CSSS3
CSS3繪製菱形程式碼例項
2017-10-30
CSSS3
css3繪製百度度熊
2018-10-27
CSSS3
css3繪製月牙效果程式碼例項
2018-02-09
CSSS3
jQuery和CSS3繪製動態笑臉
2018-03-20
jQueryCSSS3
css3繪製燃燒的蠟燭效果
2017-04-14
CSSS3
CSS3繪製安卓系統機器人
2018-07-07
CSSS3安卓機器人
大小企鵝又相聚，Linux QQ突然復活！
2019-11-24
Linux
css3繪製谷歌圖示程式碼例項
2017-03-30
CSSS3谷歌
css3繪製跳動的紅心詳解
2017-04-16
CSSS3
企鵝快跑：騰訊敏捷歷程揭祕
2011-09-20
敏捷
CSS3繪製平行四邊形程式碼例項
2017-05-26
CSSS3
css3繪製心形圖案程式碼例項
2017-02-21
CSSS3
騰訊成立企鵝影業 BAT屯兵影視產業
2015-09-15
BAT產業
CSS3繪製太極圖程式碼例項詳解
2018-09-07
CSSS3
css3繪製柳樹葉形狀程式碼例項
2017-03-27
CSSS3
騰訊QQ，人人都是高手
2021-01-18
Flutter自定義繪製（1）- 繪製基礎
2019-02-18
Flutter
View的繪製二：View的繪製流程
2019-03-24
View
繪製流程
2018-07-20
Android繪製優化（一）繪製效能分析
2017-03-20
Android優化
企鵝號回應盜號騰訊回應企鵝號盜號事件：將全面升級安全機制
2019-03-13
事件
CSS 繪製圓環
2019-11-20
CSS
Flutter繪製barchart
2021-03-04
Flutter
canvas 繪製矩形
2018-08-10
Canvas
canvas 繪製扇形
2018-08-10
Canvas
canvas 繪製文字
2018-08-10
Canvas
騰訊Web前端大會企鵝電競PWA實戰（MR_LP）
2019-03-01
Web前端
canvas 繪製圖案是重疊繪製而不是重置
2018-09-29
Canvas
canvas繪製圖案是重疊繪製而不是重置
2018-09-29
Canvas
在 Maui 中自繪元件1：繪製
2023-03-14
UI元件
View的繪製三：UI繪製的三大步驟
2019-03-24
ViewUI
Android View繪製原理：繪製流程排程、測算等
2018-12-13
AndroidView
canvas 繪製線條
2020-03-13
Canvas
CSS 繪製半圓
2019-11-20
CSS
View繪製——畫多大？
2019-02-25
View

CSS3繪製騰訊QQ企鵝

繪製我們的企鵝

相關文章