偶然間看到了 SegmentFault 上的一篇文章，感受這個(gè) Hello Kitty 畫的還不錯(cuò)，心血來(lái)潮也用 CSS3 畫了個(gè) Hello Kitty，如今在這里記錄一下詳細(xì)的繪制過程。想要源碼、素材、在線演示的同窗能夠直接拉到最下面。css

咱們先看下原圖：html

結(jié)構(gòu)分解

從上圖能夠看出，Hello Kitty 由臉蛋、耳朵、紅色蝴蝶結(jié)、眼睛、鼻子和六根胡須構(gòu)成，因此 DOM 結(jié)構(gòu)也相對(duì)簡(jiǎn)單：css3

開始繪制

能夠利用 Photoshop 的參考線精確的計(jì)算出元素的 left、top、width、height、border-width 以及四個(gè)角的水平 radius 值和垂直 radius 值，有誤差的地方再微調(diào)一下基本就能夠了。git

臉蛋

.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;

}

讓耳朵和臉蛋連為一體：github

.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;

}

再稍加點(diǎn)綴，美化一下：segmentfault

.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;

}

右耳畫的比較粗糙，由于立刻就要畫蝴蝶結(jié)了。ide

蝴蝶結(jié)

蝴蝶結(jié)分為兩個(gè)外邊，三個(gè)圓。外邊是整個(gè)繪畫過程當(dāng)中最難畫的地方，用矩形調(diào)整 radius 參數(shù)很難作到?jīng)]有誤差，由于它不像是更圓潤(rùn)的矩形，而像是更圓潤(rùn)的三角形。在這里，咱們把它分紅四塊，各個(gè)外邊各兩塊，在塊內(nèi)繪制好對(duì)應(yīng)的區(qū)域，再利用 overflow: hidden; 來(lái)隱藏多余的部分。而后是三個(gè)圓，相對(duì)簡(jiǎn)單。3d

代碼量實(shí)在太多，就不貼出來(lái)了，大概思路就這樣子。code

眼睛，鼻子

眼睛和鼻子相對(duì)簡(jiǎn)單，就不貼代碼了。orm

胡須

由于胡須是彎彎的，因此每根胡須須要兩個(gè)元素來(lái)實(shí)現(xiàn)，咱們就用 :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;

}

如今，整個(gè) Hello Kitty 就畫完了，有沒有以為很可愛？~~(?>ω

最后

總結(jié)

以上是生活随笔為你收集整理的Kitty用HTML和css咋做,使用 CSS3 绘制 Hello Kitty的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。