用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”
    >

      

  •