用CSS3代码绘制Hello Kitty的过程

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

结构分解

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

CSS Code复制内容到剪贴板
  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.     
  
  •     
    "bowknot-outside-left-bottom-container">   
  •         
    "bowknot-outside-left-bottom">
      
  •     
  •   
  •     
    "bowknot-outside-right-top-container">   
  •         
    "bowknot-outside-right-top">
      
  •     
  •   
  •     
    "bowknot-outside-right-bottom-container">   
  •         
    "bowknot-outside-right-bottom">
      
  •     
  •   
  •     
    "bowknot-inside-left">
      
  •     
    "bowknot-inside-right">
      
  •     
    "bowknot-inside-center">
      
  •        
  •     
    "left-eye">
      
  •        
  •     
    "right-eye">
      
  •        
  •     
    "nose">
      
  •        
  •     
    "left-moustache-1">
      
  •     
    "left-moustache-2">
      
  •     
    "left-moustache-3">
      
  •        
  •     
    "right-moustache-1">
      
  •     
    "right-moustache-2">
      
  •     
    "right-moustache-3">
      
  •    

    开始绘制

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

    脸蛋

    CSS Code复制内容到剪贴板
    1. .hello-kitty-div .face {   
    2.     left107px;   
    3.     top77px;   
    4.     width747px;   
    5.     height566px;   
    6.     border-top35px solid black;   
    7.     border-bottom31px solid black;   
    8.     border-left29px solid black;   
    9.     border-right30px 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-colorwhite;   
    15.     z-index: 100;   
    16. }   

    左耳

    CSS Code复制内容到剪贴板
    1. .hello-kitty-div .left-ear {   
    2.     left112px;   
    3.     top61px;   
    4.     width250px;   
    5.     height250px;   
    6.     border-top33px solid black;   
    7.     border-bottom30px solid black;   
    8.     border-left28px solid black;   
    9.     border-right30px solid black;   
    10.     border-top-left-radius: 138px 100px;   
    11.     border-bottom-left-radius: 334px 310px;   
    12.     background-colorwhite;   
    13.     transform: rotate(23Deg);   
    14.     z-index: 99;   
    15. }   

    让耳朵和脸蛋连为一体:

    CSS Code复制内容到剪贴板
    1. .hello-kitty-div .left-ear-clean {   
    2.     left146px;   
    3.     top96px;   
    4.     width250px;   
    5.     height250px;   
    6.     border-top-left-radius: 138px 100px;   
    7.     border-bottom-left-radius: 360px 310px;   
    8.     background-colorwhite;   
    9.     transform: rotate(23deg);   
    10.     z-index: 101;   
    11. }  

    再稍加点缀,美化一下:

    CSS Code复制内容到剪贴板
    1. .hello-kitty-div .left-ear-beautify {   
    2.     left149px;   
    3.     top221px;   
    4.     width60px;   
    5.     height30px;   
    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-colorblack;   
    11.     transform: rotate(-52deg);   
    12.     z-index: 102;   
    13. }   

    右耳

    CSS Code复制内容到剪贴板
    1. .hello-kitty-div .rightright-ear {   
    2.     left600px;   
    3.     top50px;   
    4.     width250px;   
    5.     height250px;   
    6.     border-top33px solid black;   
    7.     border-bottom28px solid black;   
    8.     border-left30px solid black;   
    9.     border-right29px 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-colorwhite;   
    14.     transform: rotate(-21deg);   
    15.     z-index: 99;   
    16. }   
    17. .hello-kitty-div .rightright-ear-clean {   
    18.     left700px;   
    19.     top105px;   
    20.     width120px;   
    21.     height120px;   
    22.     background-colorwhite;   
    23.     z-index: 101;   
    24. }   

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

    蝴蝶结

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

    眼睛,鼻子

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

    胡须

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

    某一根胡须的代码:

    CSS Code复制内容到剪贴板
    1. .hello-kitty-div .left-moustache-1:before {   
    2.     content'\20';   
    3.     displayblock;   
    4.     positionabsolute;   
    5.     left20px;   
    6.     top420px;   
    7.     width100px;   
    8.     height24px;   
    9.     border-top-left-radius: 80px 30px;   
    10.     border-bottom-left-radius: 20px;   
    11.     background-colorblack;   
    12.     transform: rotate(-5deg);   
    13.     z-index: 101;   
    14. }   
    15. .hello-kitty-div .left-moustache-1:after {   
    16.     content'\20';   
    17.     displayblock;   
    18.     positionabsolute;   
    19.     left131px;   
    20.     top418px;   
    21.     width60px;   
    22.     height24px;   
    23.     border-top-rightright-radius: 100px 30px;   
    24.     border-bottom-rightright-radius: 20px;   
    25.     background-colorblack;   
    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

    标签:

    猜您喜欢

    友情链接