css3繪製百度度熊
文章首發於我的部落格： ofollow,noindex">lanjianguo.github.io/blog/
前幾天看到一篇文章是寫用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屬性的使用。