使用CSS3代码绘制可爱的Hello Kitty猫

感觉这个 Hello Kitty 画的还不错，心血来潮也用 CSS3 画了个 Hello Kitty，现在在这里记录一下详细的绘制过程。想要源码、素材、在线演示的同学可以直接拉到最下面。我们先看下原图：

结构分解

从上图可以看出，Hello Kitty 由脸蛋、耳朵、红色蝴蝶结、眼睛、鼻子和六根胡须构成，所以 DOM 结构也相对简单：

1. "hello-kitty-div">   
2.        
3.     "face">   
4.        
5.     "left-ear">   
6.     "left-ear-clean">   
7.     "left-ear-beautify">   
8.        
9.     "right-ear">   
10.     "right-ear-clean">   
11.        
12.     "bowknot-outside-left-top-container">   
13.         "bowknot-outside-left-top">   
14.        
15.     "bowknot-outside-left-bottom-container">   
16.         "bowknot-outside-left-bottom">   
17.        
18.     "bowknot-outside-right-top-container">   
19.         "bowknot-outside-right-top">   
20.        
21.     "bowknot-outside-right-bottom-container">   
22.         "bowknot-outside-right-bottom">   
23.        
24.     "bowknot-inside-left">   
25.     "bowknot-inside-right">   
26.     "bowknot-inside-center">   
27.        
28.     "left-eye">   
29.        
30.     "right-eye">   
31.        
32.     "nose">   
33.        
34.     "left-moustache-1">   
35.     "left-moustache-2">   
36.     "left-moustache-3">   
37.        
38.     "right-moustache-1">   
39.     "right-moustache-2">   
40.     "right-moustache-3">   
41.    

开始绘制

可以利用 Photoshop 的参考线精确的计算出元素的 left、top、width、height、border-width 以及四个角的水平 radius 值和垂直 radius 值，有偏差的地方再微调一下基本就可以了。

脸蛋

1. .hello-kitty-div .face {   
2.     left: 107px;   
3.     top: 77px;   
4.     width: 747px;   
5.     height: 566px;   
6.     border-top: 35px solid black;   
7.     border-bottom: 31px solid black;   
8.     border-left: 29px solid black;   
9.     border-right: 30px solid black;   
10.     border-top-left-radius: 355px 333px;   
11.     border-top-rightright-radius: 355px 333px;   
12.     border-bottom-left-radius: 370px 285px;   
13.     border-bottom-rightright-radius: 330px 255px;   
14.     background-color: white;   
15.     z-index: 100;   
16. }   

左耳

1. .hello-kitty-div .left-ear {   
2.     left: 112px;   
3.     top: 61px;   
4.     width: 250px;   
5.     height: 250px;   
6.     border-top: 33px solid black;   
7.     border-bottom: 30px solid black;   
8.     border-left: 28px solid black;   
9.     border-right: 30px solid black;   
10.     border-top-left-radius: 138px 100px;   
11.     border-bottom-left-radius: 334px 310px;   
12.     background-color: white;   
13.     transform: rotate(23deg);   
14.     z-index: 99;   
15. }   

让耳朵和脸蛋连为一体：

1. .hello-kitty-div .left-ear-clean {   
2.     left: 146px;   
3.     top: 96px;   
4.     width: 250px;   
5.     height: 250px;   
6.     border-top-left-radius: 138px 100px;   
7.     border-bottom-left-radius: 360px 310px;   
8.     background-color: white;   
9.     transform: rotate(23deg);   
10.     z-index: 101;   
11. }  

再稍加点缀，美化一下：

1. .hello-kitty-div .left-ear-beautify {   
2.     left: 149px;   
3.     top: 221px;   
4.     width: 60px;   
5.     height: 30px;   
6.     border-top-left-radius: 20px 15px;   
7.     border-top-rightright-radius: 25px 15px;   
8.     border-bottom-left-radius: 20px 15px;   
9.     border-bottom-rightright-radius: 25px 15px;   
10.     background-color: black;   
11.     transform: rotate(-52deg);   
12.     z-index: 102;   
13. }   

右耳

1. .hello-kitty-div .rightright-ear {   
2.     left: 600px;   
3.     top: 50px;   
4.     width: 250px;   
5.     height: 250px;   
6.     border-top: 33px solid black;   
7.     border-bottom: 28px solid black;   
8.     border-left: 30px solid black;   
9.     border-right: 29px solid black;   
10.     border-top-left-radius: 220px 170px;   
11.     border-top-rightright-radius: 90px 57px;   
12.     border-bottom-rightright-radius: 334px 245px;   
13.     background-color: white;   
14.     transform: rotate(-21deg);   
15.     z-index: 99;   
16. }   
17. .hello-kitty-div .rightright-ear-clean {   
18.     left: 700px;   
19.     top: 105px;   
20.     width: 120px;   
21.     height: 120px;   
22.     background-color: white;   
23.     z-index: 101;   
24. }   

右耳画的比较粗糙，因为马上就要画蝴蝶结了。

蝴蝶结

蝴蝶结分为两个外边，三个圆。外边是整个绘画过程中最难画的地方，用矩形调整 radius 参数很难做到没有偏差，因为它不像是更圆润的矩形，而像是更圆润的三角形。在这里，我们把它分成四块，各个外边各两块，在块内绘制好对应的区域，再利用 overflow: hidden; 来隐藏多余的部分。然后是三个圆，相对简单。
 
代码量实在太多，就不贴出来了，大概思路就这样子。

眼睛，鼻子

眼睛和鼻子相对简单，就不贴代码了。

胡须

因为胡须是弯弯的，所以每根胡须需要两个元素来实现，我们就用 :before 和 :after 吧。

某一根胡须的代码：

1. .hello-kitty-div .left-moustache-1:before {   
2.     content: '20';   
3.     display: block;   
4.     position: absolute;   
5.     left: 20px;   
6.     top: 420px;   
7.     width: 100px;   
8.     height: 24px;   
9.     border-top-left-radius: 80px 30px;   
10.     border-bottom-left-radius: 20px;   
11.     background-color: black;   
12.     transform: rotate(-5deg);   
13.     z-index: 101;   
14. }   
15. .hello-kitty-div .left-moustache-1:after {   
16.     content: '20';   
17.     display: block;   
18.     position: absolute;   
19.     left: 131px;   
20.     top: 418px;   
21.     width: 60px;   
22.     height: 24px;   
23.     border-top-rightright-radius: 100px 30px;   
24.     border-bottom-rightright-radius: 20px;   
25.     background-color: black;   
26.     transform: rotate(2deg);   
27.     z-index: 101;   
28. }   

现在，整个 Hello Kitty 就画完了，有没有觉得很可爱？~~(ฅ>ω<*ฅ)~~。

完整源码及素材：https://github.com/chnhyg/css3-hello-kitty

在线演示：http://chnhyg.coding.me/css3-hello-kitty