css3繪製百度度熊

時間 2019-11-17

標籤 css3 css 繪製百度欄目 CSS 简体版

原文原文鏈接

文章首發於個人博客：lanjianguo.github.io/blog/css

前幾天看到一篇文章是寫用css3繪製騰訊企鵝的。趁着今天有空，就用css3來寫一個百度的小度熊。話很少說，開始上碼。html

爆照

先來一張呆萌小度熊的成果照。前端

在繪製小度熊以前，首先要對小度熊佈局上進行一個分解，便於咱們組織代碼結構。從總體結構上主要分紅耳朵，頭部和身體。咱們統一對將胳膊，肚子和腿都放到了身體的部分裏。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>
複製代碼

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

/*背景容器*/
*{
    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; */
 }
複製代碼

頭部

而後咱們就能夠在容器中，放置各個部分了，我是按從上到下的順序寫的，因此最開始放置的是頭部。github

/*頭部*/
.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值，能夠輕鬆給元素設置圓角邊框，甚至實現繪製圓、半圓、四分之一的圓等各類圓角圖形。由於我沒有準確的尺寸圖，因此就用百分比來實現了。web

「/」前的四個數值表示圓角的水平半徑，後面四個值表示圓角的垂直半徑。這個方法咱們在後面還會很頻繁的使用到。框架

耳朵

繪製完頭部輪廓以後，咱們能夠把耳朵的輪廓也加上，原本計劃是將耳朵寫在頭部佈局

內部的，可是由於要考慮層級壓蓋的狀況，仍是把耳朵要素單獨的放在了外面。這裏有一個關鍵屬性就是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;
}
複製代碼

眼睛

接下來就開始填充繪製頭部裏面的內容，頭部裏面主要是眼睛，鼻子和嘴巴，咱們先來畫眼睛，爲了看的清楚，咱們就把頭部填充上顏色了。spa

/*左眼白*/
.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）

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。