感覺這個 Hello Kitty 畫的還不錯，心血來潮也用 CSS3 畫了個 Hello Kitty，現在在這里記錄一下詳細的繪制過程。想要源碼、素材、在線演示的同學可以直接拉到最下面。我們先看下原圖：

結構分解

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

CSS Code復制內容到剪貼板

開始繪制

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

臉蛋

CSS Code復制內容到剪貼板

.hello-kitty-div?.face?{

left:107px;

top:77px;

width:747px;

height:566px;

border-top:35pxsolidblack;

border-bottom:31pxsolidblack;

border-left:29pxsolidblack;

border-right:30pxsolidblack;

border-top-left-radius:355px333px;

border-top-rightright-radius:355px333px;

border-bottom-left-radius:370px285px;

border-bottom-rightright-radius:330px255px;

background-color:white;

z-index:?100;

}

左耳

CSS Code復制內容到剪貼板

.hello-kitty-div?.left-ear?{

left:112px;

top:61px;

width:250px;

height:250px;

border-top:33pxsolidblack;

border-bottom:30pxsolidblack;

border-left:28pxsolidblack;

border-right:30pxsolidblack;

border-top-left-radius:138px100px;

border-bottom-left-radius:334px310px;

background-color:white;

transform:?rotate(23deg);

z-index:?99;

}

讓耳朵和臉蛋連為一體：

CSS Code復制內容到剪貼板

.hello-kitty-div?.left-ear-clean?{

left:146px;

top:96px;

width:250px;

height:250px;

border-top-left-radius:138px100px;

border-bottom-left-radius:360px310px;

background-color:white;

transform:?rotate(23deg);

z-index:?101;

}

再稍加點綴，美化一下：

CSS Code復制內容到剪貼板

.hello-kitty-div?.left-ear-beautify?{

left:149px;

top:221px;

width:60px;

height:30px;

border-top-left-radius:20px15px;

border-top-rightright-radius:25px15px;

border-bottom-left-radius:20px15px;

border-bottom-rightright-radius:25px15px;

background-color:black;

transform:?rotate(-52deg);

z-index:?102;

}

右耳

CSS Code復制內容到剪貼板

.hello-kitty-div?.rightright-ear?{

left:600px;

top:50px;

width:250px;

height:250px;

border-top:33pxsolidblack;

border-bottom:28pxsolidblack;

border-left:30pxsolidblack;

border-right:29pxsolidblack;

border-top-left-radius:220px170px;

border-top-rightright-radius:90px57px;

border-bottom-rightright-radius:334px245px;

background-color:white;

transform:?rotate(-21deg);

z-index:?99;

}

.hello-kitty-div?.rightright-ear-clean?{

left:700px;

top:105px;

width:120px;

height:120px;

background-color:white;

z-index:?101;

}

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

蝴蝶結

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

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

眼睛，鼻子

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

胡須

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

某一根胡須的代碼：

CSS Code復制內容到剪貼板

.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:80px30px;

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-rightright-radius:100px30px;

border-bottom-rightright-radius:20px;

background-color:black;

transform:?rotate(2deg);

z-index:?101;

}

現在，整個 Hello Kitty 就畫完了，有沒有覺得很可愛？~~(?>ω

總結

以上是生活随笔為你收集整理的Kitty用HTML和css咋做,使用CSS3代码绘制可爱的Hello Kitty猫的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。