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

互联网
近处的大树枝叶茂盛。小草叶子又肥又美。小花绚丽多姿。一阵阵风吹来，花草树木，一起奏出了森林交响曲，一只只蝴蝶随着交响曲跳起了舞呢。

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

结构分解

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

CSS Code复制内容到剪贴板
  1. <divclass="hello-kitty-div">
  2. <!--脸蛋-->
  3. <divclass="face"></div>
  4. <!--左耳-->
  5. <divclass="left-ear"></div>
  6. <divclass="left-ear-clean"></div>
  7. <divclass="left-ear-beautify"></div>
  8. <!--右耳-->
  9. <divclass="right-ear"></div>
  10. <divclass="right-ear-clean"></div>
  11. <!--蝴蝶结-->
  12. <divclass="bowknot-outside-left-top-container">
  13. <divclass="bowknot-outside-left-top"></div>
  14. </div>
  15. <divclass="bowknot-outside-left-bottom-container">
  16. <divclass="bowknot-outside-left-bottom"></div>
  17. </div>
  18. <divclass="bowknot-outside-right-top-container">
  19. <divclass="bowknot-outside-right-top"></div>
  20. </div>
  21. <divclass="bowknot-outside-right-bottom-container">
  22. <divclass="bowknot-outside-right-bottom"></div>
  23. </div>
  24. <divclass="bowknot-inside-left"></div>
  25. <divclass="bowknot-inside-right"></div>
  26. <divclass="bowknot-inside-center"></div>
  27. <!--左眼-->
  28. <divclass="left-eye"></div>
  29. <!--右眼-->
  30. <divclass="right-eye"></div>
  31. <!--鼻子-->
  32. <divclass="nose"></div>
  33. <!--左胡须-->
  34. <divclass="left-moustache-1"></div>
  35. <divclass="left-moustache-2"></div>
  36. <divclass="left-moustache-3"></div>
  37. <!--右胡须-->
  38. <divclass="right-moustache-1"></div>
  39. <divclass="right-moustache-2"></div>
  40. <divclass="right-moustache-3"></div>
  41. </div>

开始绘制

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

脸蛋

CSS Code复制内容到剪贴板
  1. .hello-kitty-div.face{
  2. left:107px;
  3. top:77px;
  4. width:747px;
  5. height:566px;
  6. border-top:35pxsolidblack;
  7. border-bottom:31pxsolidblack;
  8. border-left:29pxsolidblack;
  9. border-right:30pxsolidblack;
  10. border-top-left-radius:355px333px;
  11. border-top-rightright-radius:355px333px;
  12. border-bottom-left-radius:370px285px;
  13. border-bottom-rightright-radius:330px255px;
  14. background-color:white;
  15. z-index:100;
  16. }

左耳

CSS Code复制内容到剪贴板
  1. .hello-kitty-div.left-ear{
  2. left:112px;
  3. top:61px;
  4. width:250px;
  5. height:250px;
  6. border-top:33pxsolidblack;
  7. border-bottom:30pxsolidblack;
  8. border-left:28pxsolidblack;
  9. border-right:30pxsolidblack;
  10. border-top-left-radius:138px100px;
  11. border-bottom-left-radius:334px310px;
  12. background-color:white;
  13. transform:rotate(23deg);
  14. z-index:99;
  15. }

让耳朵和脸蛋连为一体：

CSS Code复制内容到剪贴板
  1. .hello-kitty-div.left-ear-clean{
  2. left:146px;
  3. top:96px;
  4. width:250px;
  5. height:250px;
  6. border-top-left-radius:138px100px;
  7. border-bottom-left-radius:360px310px;
  8. background-color:white;
  9. transform:rotate(23deg);
  10. z-index:101;
  11. }

再稍加点缀，美化一下：

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

右耳

CSS Code复制内容到剪贴板
  1. .hello-kitty-div.rightright-ear{
  2. left:600px;
  3. top:50px;
  4. width:250px;
  5. height:250px;
  6. border-top:33pxsolidblack;
  7. border-bottom:28pxsolidblack;
  8. border-left:30pxsolidblack;
  9. border-right:29pxsolidblack;
  10. border-top-left-radius:220px170px;
  11. border-top-rightright-radius:90px57px;
  12. border-bottom-rightright-radius:334px245px;
  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 吧。

某一根胡须的代码：

CSS Code复制内容到剪贴板
  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:80px30px;
  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:100px30px;
  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

到此这篇关于如何使用CSS3代码绘制可爱的Hello Kitty猫就介绍到这了。做事，进有招退有术；做人，心无边行有度。看淡纷扰，看轻得失，来了、去了，随缘随喜。功名利禄皆为过眼云烟，不是自己的不要强求。真正的君子是，明知有机可投却不为所动。做人不求问心无愧，只求无愧于心。更多相关如何使用CSS3代码绘制可爱的Hello Kitty猫内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！

您可能有感兴趣的文章
css让页脚保持在底部位置的四种方案
CSS如何使用Flex和Grid布局如何实现3D骰子
Flex布局史上最简单使用语法教程
新的CSS 伪类函数 :is() 和 :where()示例详解
纯CSS打字动画的如何实现示例