使用 CSS3 繪制 Hello Kitty

偶然間看到了 SegmentFault 上的一篇文章，感覺這個 Hello Kitty 畫的還不錯，心血來潮也用 CSS3 畫了個 Hello Kitty，現在在這里記錄一下詳細的繪制過程。想要源碼、素材、在線演示的同學可以直接拉到最下面。

我們先看下原圖：

結構分解

從上圖可以看出，Hello Kitty 由臉蛋、耳朵、紅色蝴蝶結、眼睛、鼻子和六根胡須構成，所以 DOM 結構也相對簡單：

<div class="hello-kitty-div">
    <!-- 臉蛋 -->
    <div class="face"></div>

    <!-- 左耳 -->
    <div class="left-ear"></div>
    <div class="left-ear-clean"></div>
    <div class="left-ear-beautify"></div>
    <!-- 右耳 -->
    <div class="right-ear"></div>
    <div class="right-ear-clean"></div>

    <!-- 蝴蝶結 -->
    <div class="bowknot-outside-left-top-container">
        <div class="bowknot-outside-left-top"></div>
    </div>
    <div class="bowknot-outside-left-bottom-container">
        <div class="bowknot-outside-left-bottom"></div>
    </div>
    <div class="bowknot-outside-right-top-container">
        <div class="bowknot-outside-right-top"></div>
    </div>
    <div class="bowknot-outside-right-bottom-container">
        <div class="bowknot-outside-right-bottom"></div>
    </div>
    <div class="bowknot-inside-left"></div>
    <div class="bowknot-inside-right"></div>
    <div class="bowknot-inside-center"></div>

    <!-- 左眼 -->
    <div class="left-eye"></div>
    <!-- 右眼 -->
    <div class="right-eye"></div>

    <!-- 鼻子 -->
    <div class="nose"></div>

    <!-- 左胡須 -->
    <div class="left-moustache-1"></div>
    <div class="left-moustache-2"></div>
    <div class="left-moustache-3"></div>
    <!-- 右胡須 -->
    <div class="right-moustache-1"></div>
    <div class="right-moustache-2"></div>
    <div class="right-moustache-3"></div>
</div>

開始繪制

可以利用 Photoshop 的參考線精確的計算出元素的 left、top、width、height、border-width 以及四個角的水平 radius 值和垂直 radius 值，有偏差的地方再微調一下基本就可以了。

臉蛋

.hello-kitty-div .face {
    left: 107px;
    top: 77px;
    width: 747px;
    height: 566px;
    border-top: 35px solid black;
    border-bottom: 31px solid black;
    border-left: 29px solid black;
    border-right: 30px solid black;
    border-top-left-radius: 355px 333px;
    border-top-right-radius: 355px 333px;
    border-bottom-left-radius: 370px 285px;
    border-bottom-right-radius: 330px 255px;
    background-color: white;
    z-index: 100;
}

左耳

.hello-kitty-div .left-ear {
    left: 112px;
    top: 61px;
    width: 250px;
    height: 250px;
    border-top: 33px solid black;
    border-bottom: 30px solid black;
    border-left: 28px solid black;
    border-right: 30px solid black;
    border-top-left-radius: 138px 100px;
    border-bottom-left-radius: 334px 310px;
    background-color: white;
    transform: rotate(23deg);
    z-index: 99;
}

讓耳朵和臉蛋連為一體：

.hello-kitty-div .left-ear-clean {
    left: 146px;
    top: 96px;
    width: 250px;
    height: 250px;
    border-top-left-radius: 138px 100px;
    border-bottom-left-radius: 360px 310px;
    background-color: white;
    transform: rotate(23deg);
    z-index: 101;
}

再稍加點綴，美化一下：

.hello-kitty-div .left-ear-beautify {
    left: 149px;
    top: 221px;
    width: 60px;
    height: 30px;
    border-top-left-radius: 20px 15px;
    border-top-right-radius: 25px 15px;
    border-bottom-left-radius: 20px 15px;
    border-bottom-right-radius: 25px 15px;
    background-color: black;
    transform: rotate(-52deg);
    z-index: 102;
}

右耳

.hello-kitty-div .right-ear {
    left: 600px;
    top: 50px;
    width: 250px;
    height: 250px;
    border-top: 33px solid black;
    border-bottom: 28px solid black;
    border-left: 30px solid black;
    border-right: 29px solid black;
    border-top-left-radius: 220px 170px;
    border-top-right-radius: 90px 57px;
    border-bottom-right-radius: 334px 245px;
    background-color: white;
    transform: rotate(-21deg);
    z-index: 99;
}

.hello-kitty-div .right-ear-clean {
    left: 700px;
    top: 105px;
    width: 120px;
    height: 120px;
    background-color: white;
    z-index: 101;
}

右耳畫的比較粗糙，因為馬上就要畫蝴蝶結了。

蝴蝶結

蝴蝶結分為兩個外邊，三個圓。外邊是整個繪畫過程中最難畫的地方，用矩形調整 radius 參數很難做到沒有偏差，因為它不像是更圓潤的矩形，而像是更圓潤的三角形。在這里，我們把它分成四塊，各個外邊各兩塊，在塊內繪制好對應的區域，再利用 overflow: hidden; 來隱藏多余的部分。然后是三個圓，相對簡單。

代碼量實在太多，就不貼出來了，大概思路就這樣子。

眼睛，鼻子

眼睛和鼻子相對簡單，就不貼代碼了。

胡須

因為胡須是彎彎的，所以每根胡須需要兩個元素來實現，我們就用 :before 和 :after 吧。

某一根胡須的代碼：

.hello-kitty-div .left-moustache-1:before {
    content: '\20';
    display: block;
    position: absolute;
    left: 20px;
    top: 420px;
    width: 100px;
    height: 24px;
    border-top-left-radius: 80px 30px;
    border-bottom-left-radius: 20px;
    background-color: black;
    transform: rotate(-5deg);
    z-index: 101;
}

.hello-kitty-div .left-moustache-1:after {
    content: '\20';
    display: block;
    position: absolute;
    left: 131px;
    top: 418px;
    width: 60px;
    height: 24px;
    border-top-right-radius: 100px 30px;
    border-bottom-right-radius: 20px;
    background-color: black;
    transform: rotate(2deg);
    z-index: 101;
}

現在，整個 Hello Kitty 就畫完了，有沒有覺得很可愛？~~(ฅ>ω<*ฅ)~~。

最后

完整源碼及素材：https://github.com/chnhyg/css3-hello-kitty
在線演示：http://chnhyg.coding.me/css3-hello-kitty