应用CSS3编码绘图讨人喜欢的Hello Kitty猫

日期:2021-03-18 类型:科技新闻 

关键词:上线了小程序官网,年会抽奖小程序免费,做小程序,小程序网站,跑腿小程序

觉得这个 Hello Kitty 画的还非常好,心力来潮也用 CSS3 画了个 Hello Kitty,如今在这里纪录1下详尽的绘图全过程。要想源代码、素材、线上演试的同学能够立即拉到最下面。大家先看下原图:

构造溶解

从上图能够看出,Hello Kitty 由脸蛋、耳朵、鲜红色胡蝶结、双眼、鼻部和6根胡子组成,因此 DOM 构造也相对性简易:

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

刚开始绘图

能够运用 Photoshop 的参照线精准的测算出元素的 left、top、width、height、border-width 和4个角的水平 radius 值和竖直 radius 值,有误差的地区再微调1下基础便可以了。

脸蛋

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. }   

让耳朵和脸蛋连为1体:

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. }  

再略加装点,清理1下:

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(⑸2deg);   
  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(⑵1deg);   
  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. }   

右耳画的较为不光滑,由于立刻就要画胡蝶结了。

胡蝶结

胡蝶结分成两个外边,3个圆。外边是全部美术绘画全过程中最难画的地区,用矩形框调剂 radius 主要参数很难保证沒有误差,由于它不好像更圆滑的矩形框,而好像更圆滑的3角形。在这里,大家把它分为4块,各个外边各两块,在块内绘图好对应的地区,再运用 overflow: hidden; 来掩藏过剩的一部分。随后是3个圆,相对性简易。
 
编码量确实太多,就不贴出来了,大约思路就这模样。

双眼,鼻部

双眼和鼻部相对性简易,就不贴编码了。

胡子

由于胡子是弯弯的,因此每根胡子必须两个元向来完成,大家就用 :before 和 :after 吧。

某1根胡子的编码:

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(⑸deg);   
  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

上一篇:浅谈CSS3栏合理布局的N种完成 返回下一篇:没有了