css3繪製百度度熊

藍蘭蘭發表於2018-10-27
CSSS3

文章首發於我的部落格：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>
複製程式碼

結構調整好之後，我們先把背景容器的位置和大小設定一下。在開發的時候，可以先給背景設定一個深色背景，便於我們看各部分的位置，最後的時候註釋掉就可以了。

/*背景容器*/
*{
    margin:0px;
    padding:0px;
}
html{
    height:100%;
} 
body{
   height:100%;
   background-color: #333333;
}
.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屬性的使用。

更多精彩文章歡迎關注公眾號【前端】（qianduan_web）

css3繪製百度度熊

相關文章