前幾天看到一篇文章是寫用css3繪制騰訊企鵝的。趁著今天有空，就用css3來寫一個百度的小度熊。話不多說，開始上碼。
爆照
先來一張呆萌小度熊的成果照。
在繪制小度熊之前，首先要對小度熊布局上進行一個分解，便于我們組織代碼結構。 從整體結構上主要分成耳朵，頭部和身體。我們統一對將胳膊，肚子和腿都放到了身體的部分里。
<!-- 頁面框架 --><!Doctype html><html><head> <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/> <title>純css度熊</title> <link rel="stylesheet" href="./bear.css"/></head><body> <!-- 背景 --> <div class="bac"> <!-- 頭部 --> <!-- 耳朵 --> <div class="earLeft"></div> <div class="earRight"></div> <!-- 臉 --> <div class="head"></div> <!-- 身體 --> <div class="body"> <!-- 胳膊 --> <div class="armLeft"></div> <div class="armRight"></div> <!-- 肚子 --> <div class="tummy"></div> <!-- 腿 --> <div class="legLeft"></div> <div class="legRight"></div> </div> <!-- 陰影 --> <div class="shaodw"></div> </div></body>
結構調整好之后，我們先把背景容器的位置和大小設置一下。在開發的時候，可以先給背景設置一個深色背景，便于我們看各部分的位置，最后的時候注釋掉就可以了。
/*背景容器*/.bac { width: 345px; height: 500px; top: 50%; position: relative; left: 50%; transform: translate(-50%,-50%); /* background-color: #333333; */ }頭部
然后我們就可以在容器中，放置各個部分了，我是按從上到下的順序寫的，所以最開始放置的是頭部。
/*頭部*/.bac .head { width: 346px; height: 288px; /* background-color: #e1b79b; */ border: 3px solid #a57662; border-radius: 50% 50% 50% 50% / 70% 60% 40% 40%; position: relative; z-index: 88; }知識點來了，怎么樣可以畫出這種不規則的形狀呢？繪制這種帶有弧線的形狀，可以使用border-radius屬性，具體使用方法這里不深入討論，簡單來說通過設置元素的border-radius值，可以輕松給元素設置圓角邊框，甚至實現繪制圓、半圓、四分之一的圓等各種圓角圖形。因為我沒有準確的尺寸圖，所以就用百分比來實現了。
“/”前的四個數值表示圓角的水平半徑，后面四個值表示圓角的垂直半徑。這個方法我們在后面還會很頻繁的使用到。
耳朵
繪制完頭部輪廓之后，我們可以把耳朵的輪廓也加上，本來計劃是將耳朵寫在頭部
內部的，但是因為要考慮層級壓蓋的情況，還是把耳朵要素單獨的放在了外面。這里有一個關鍵屬性就是transform: rotate(Xdeg)用來對要素做旋轉，我們可以將耳朵旋轉成對應的角度。
/*左耳朵*/.earLeft { height: 50px; width: 70px; /* background-color: #e1b79b; */ border-radius: 200px 200px 100px 100px; border: 3px solid #a57662; transform: rotate(-49deg); position: absolute; top: 10px; left: 12px;}/*右耳朵*/.earRight { height: 50px; width: 70px; /* background-color: #e1b79b; */ border-radius: 200px 200px 100px 100px; border: 3px solid #a57662; transform: rotate(40deg); position: absolute; top: 10px; right: 0;}眼睛
接下來就開始填充繪制頭部里面的內容，頭部里面主要是眼睛，鼻子和嘴巴，我們先來畫眼睛，為了看的清楚，我們就把頭部填充上顏色了。
/*左眼白*/.head .eyeLeft { height: 78px; width: 67px; background-color: #ffffff; border-radius: 50% / 50%; transform: rotate(20deg); position: absolute; top: 113px; left: 68px; } /*左眼珠*/ .head .eyeConLeft { width: 28px; height: 33px; background-color: #511313; position: absolute; border-radius: 50%/50%; transform: rotate(-13deg); top: 20px; right: 15px; } /*右眼白*/ .head .eyeRight { height: 78px; width: 67px; background-color: #ffffff; border-radius: 50% / 50%; transform: rotate(-20deg); position: absolute; top: 113px; right: 68px; } /*右眼珠*/ .head .eyeConRight { width: 28px; height: 33px; background-color: #511313; position: absolute; border-radius: 50%/50%; transform: rotate(13deg); top: 20px; left: 15px;}
嘴巴
繪制了眼睛之后，我們來繪制嘴巴，嘴巴沒有太特殊的地方，我們用正常橢圓就可以。
/*嘴巴*/.head .mouse { width: 99px; height: 76px; background-color: #f7f9e5; position: absolute; left: 50%; transform: translate(-50%,0); border-radius: 50% / 50%; top: 187px; }鼻子
雖然嘴巴就是一個普通的橢圓，但是鼻子比較特殊，鼻子我們可以看作是一個半橢圓+三角形組成。
知識點又來了，怎么樣用css畫半橢圓和三角形呢？
我們可以利用 border-radius: 50%/100% 100% 0 0; 來實現半橢圓的繪制。
我們利用將width和height設置為0，通過border屬性來實現三角形的繪制。
我為了操作方便，在給鼻子設置來一個容器，使其居中，便于調整。
/*鼻子容器*/.head .nose { width: 18px; height: 14px; position: absolute; left: 50%; margin-left: -9px; top: 13px;}/* 鼻子上部分-半橢圓*/.nose .noseTop { width: 18px; height: 8px; background-color: #511313; border-radius: 50%/100% 100% 0 0; } /* 鼻子下部分-三角形*/ .nose .noseBottom { width: 0; height: 0; border-width: 9px 9px 0; border-style: solid; border-color: #511313 transparent transparent; position: relative; }耳朵內部
終于完成了頭部的操作，結果發現耳朵少了點什么，原來耳朵少了內部的要素，我們就分別給耳朵內部加點東西。
/* 左耳朵內部*/.earLeft .earCon { width: 40px; height: 60px; background-color: #eed8c5; border-radius: 50%/ 40% 40% 30% 30%; margin-left: 17px; margin-top: 15px; transform: rotate(-3deg); } /*右耳朵內部*/ .earRight .earCon { width: 40px; height: 60px; background-color: #eed8c5; border-radius: 50%/ 40% 40% 30% 30%; margin-left: 17px; margin-top: 15px; transform: rotate(-3deg); }輔助要素
小度熊的頭部繪制完了，但是耳朵的地方還不夠完美，因為頭部的輪廓線把耳朵遮住了，我們想讓頭部和耳朵連在一起，這就用到了我們的輔助要素。我們可以把輔助要素設置成和頭部一樣的顏色，將頭部與耳朵間的輪廓線蓋住，這樣就看起來好多了。
/*左側輔助要素*/.head .arcLeft { position: absolute; top: 36px; left: 23px; width: 80px; height: 30px; background-color: #e1b79b; border-radius: 50%/ 50%; transform: rotate(-45deg);}/*右側輔助要素*/.head .arcRight { position: absolute; top: 34px; right: 16px; width: 80px; height: 30px; background-color: #e1b79b; border-radius: 50%/ 50%; transform: rotate(43deg); }身體
終于完成了頭部的繪制，接下來就開始身體的繪制，同樣需要先分析一下身體里包括那些部分，我們可以看到身體里主要包括胳膊，肚子和腿。
我們為了看清楚各部分位置，可以先給身體容器加上背景顏色，最后再去掉。
/*度熊身體*/.body { width: 208px; height: 217px; margin: -10px auto; position: relative;}胳膊
我們先來添加小度熊的胳膊，最后位置可以再微調。
/*左側胳膊*/.body .armLeft { width: 53px; height: 150px; background-color: #e1b79b; border: 2px solid #a57662; border-radius: 50% 50%/60% 30%; transform: rotate(10deg); left: 6px; position: absolute;}/*右側胳膊*/.body .armRight { width: 53px; height: 150px; background-color: #e1b79b; border: 2px solid #a57662; border-radius: 50% 50%/60% 30%; transform: rotate(-14deg); position: absolute; right: 6px;}肚子
繪制好胳膊我們就可以繪制小度熊，肉嘟嘟的肚子了。
知識點來了，這里繪制的肚子有一點想雞蛋形，其實還是利用border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;這個屬性來設置的，通過改變半徑大小，實現這種雞蛋形的圖案繪制。
之前說的可能漏了一句，我們的要素大部分是基于position: absolute來定位的，因為這個屬性可以設置層級，便于我們圖案的壓蓋。這里的肚子就要設置高一點的層級，壓蓋住之前繪制的胳膊圖案。
/*肚子*/.body .tummy { width: 144px; height: 200px; background-color: #e1b79b; position: absolute; left: 50%; transform: translate(-50%,0); border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%; margin-top: -30px; border: 2px solid #a57662; }
肚子圖案
在小度熊的肚子上還有一個小圖案，我們直接添加覆蓋上去就可以了。
/*肚子圖案*/.body .tummyCon { width: 83px; height: 90px; background-color: #f7f9e5; -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px; border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%; position: absolute; top: 60px; left: 50%; transform: translate(-50%, 0);}腿
繪制好肚子之后，我們來繪制腿，腿上面沒有什么太多難點，就是注意邊框和腳的弧度就行。
/*左腿*/.body .legLeft { width: 53px; height: 100px; background-color: #e1b79b; position: absolute; bottom: 0px; left: 30px; border: 2px solid #a57662; border-color: transparent transparent #a57662 #a57662; border-radius: 50% 50% 50% 50%/0 0 10% 50%; } /*右腿*/ .body .legRight { width: 53px; height: 100px; background-color: #e1b79b; position: absolute; bottom: 0px; right: 30px; border: 2px solid #a57662; border-color: transparent #a57662 #a57662 transparent; border-radius: 50% 50% 50% 50%/0 0 50% 10%; }輔助要素
到這里我們基本的要素就繪制齊了，身體容器的背景顏色就可以去掉了，然后同樣要繪制一些輔助元素，來讓我們的小度熊看起來更好看。
我們要給小度熊添加一個脖子，蓋住身體的線條。
給肚子添加一個曲線，讓肚子和腿更立體。
最后就是要用輔助線條把腳展示出來。
把這幾個步驟完成，我們的小度熊整體就全部完成了。
/*脖子遮蓋*/.body .neck { width: 120px; height: 30px; background-color: #e1b79b; position: absolute; left: 50%; transform: translate(-50%,0); } /*肚子輔助線*/ .body .arc { border-bottom: 2px solid #511313; position: absolute; top: 70px; left: 50%; transform: translate(-50%, 0); width: 100px; height: 100px; border: solid 2px #a57662; border-color: transparent transparent #a57662 transparent; border-radius: 50%/ 0 0 30% 30%; } /*左腳輔助線*/ .body .arcLeft { border-bottom: 2px solid #511313; position: absolute; bottom: -30px; left: 43px; width: 35px; height: 50px; border: solid 2px #a57662; border-color: #a57662 transparent transparent transparent; border-radius: 50%/ 20% 20% 0 0; } /*右腳輔助線*/ .body .arcRight { border-bottom: 2px solid #511313; position: absolute; bottom: -30px; right: 43px; width: 35px; height: 50px; border: solid 2px #a57662; border-color: #a57662 transparent transparent transparent; border-radius: 50%/ 20% 20% 0 0; }陰影
最后一步，給小度熊的腳底加一個陰影，我們就大功告成了。
/*陰影*/.shaodw { width: 217px; height: 39px; background-color: #e9ecee; margin: -20px auto; border-radius: 50%/50%;}總結
繪制小度熊的關鍵是一個是對于布局的分析，一個是css的border-radius和transform: rotate屬性的使用。
新聞熱點
疑難解答
