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


Posted in HTML / CSS onAugust 03, 2016

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

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

结构分解

从上图可以看出,Hello Kitty 由脸蛋、耳朵、红色蝴蝶结、眼睛、鼻子和六根胡须构成,所以 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-1"></div>   
  35.     <div class="left-moustache-2"></div>   
  36.     <div class="left-moustache-3"></div>   
  37.     <!-- 右胡须 -->   
  38.     <div class="right-moustache-1"></div>   
  39.     <div class="right-moustache-2"></div>   
  40.     <div class="right-moustache-3"></div>   
  41. </div>   

开始绘制

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

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

脸蛋

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

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

左耳

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

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

让耳朵和脸蛋连为一体:

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

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

再稍加点缀,美化一下:

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

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

右耳

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

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

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

蝴蝶结

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

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

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

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

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

眼睛,鼻子

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

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

胡须

因为胡须是弯弯的,所以每根胡须需要两个元素来实现,我们就用 :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 就画完了,有没有觉得很可爱?~~(ฅ>ω<*ฅ)~~。

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

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

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

HTML / CSS 相关文章推荐
IE下实现类似CSS3 text-shadow文字阴影的几种方法
May 11 HTML / CSS
一款纯css3实现的动画加载导航
Oct 08 HTML / CSS
CSS3中的Transition过度与Animation动画属性使用要点
May 20 HTML / CSS
CSS3中的Media Queries学习笔记
May 23 HTML / CSS
CSS3 实现雷达扫描图的示例代码
Sep 21 HTML / CSS
关于css中margin的值和垂直外边距重叠问题
Oct 27 HTML / CSS
在HTML5 Canvas中放入图片和保存为图片的方法
May 03 HTML / CSS
深入解析HTML5 Canvas控制图形矩阵变换的方法
Mar 24 HTML / CSS
HTML5 客户端数据库简易使用:IndexedDB
Dec 19 HTML / CSS
网站性能延迟加载图像的五种技巧(小结)
Aug 13 HTML / CSS
CSS3鼠标悬浮过渡缩放效果
Apr 17 HTML / CSS
html+css实现分层金字塔的实例
Jun 02 HTML / CSS
使用css3绘制出各种几何图形
Aug 17 #HTML / CSS
利用CSS3实现自定义滚动条代码分享
Aug 18 #HTML / CSS
纯CSS3实现图片无间断轮播效果
Aug 25 #HTML / CSS
纯CSS3代码实现switch滑动开关按钮效果
Aug 30 #HTML / CSS
CSS3实现跳动的动画效果
Sep 12 #HTML / CSS
利用CSS3的flexbox实现水平垂直居中与三列等高布局
Sep 12 #HTML / CSS
对CSS3选择器的研究(详解)
Sep 16 #HTML / CSS
You might like
php中数据的批量导入(csv文件)
2006/10/09 PHP
PHP中的替代语法简介
2014/08/22 PHP
PHP常用正则表达式精选(推荐)
2019/05/28 PHP
jqgrid 简单学习笔记
2011/05/03 Javascript
JavaScript高级程序设计 阅读笔记(四) ECMAScript中的类型转换
2012/02/27 Javascript
Jquery实现仿腾讯微博发表广播
2014/11/17 Javascript
js实现横向百叶窗效果网页切换动画效果的方法
2015/03/02 Javascript
JavaScript中双符号的运算详解
2017/03/12 Javascript
JavaScript mixin实现多继承的方法详解
2017/03/30 Javascript
微信小程序 sha1 实现密码加密实例详解
2017/07/06 Javascript
Vue2.0实现将页面中表格数据导出excel的实例
2017/08/09 Javascript
微信小程序在地图选择地址并返回经纬度简单示例
2018/12/03 Javascript
[01:33:14]LGD vs VP Supermajor 败者组决赛 BO3 第二场 6.10
2018/07/04 DOTA
浅谈Python 对象内存占用
2016/07/15 Python
浅谈scrapy 的基本命令介绍
2017/06/13 Python
解决python文件字符串转列表时遇到空行的问题
2017/07/09 Python
浅谈pandas用groupby后对层级索引levels的处理方法
2018/11/06 Python
python3安装speech语音模块的方法
2018/12/24 Python
500行代码使用python写个微信小游戏飞机大战游戏
2019/10/16 Python
python 日志模块 日志等级设置失效的解决方案
2020/05/26 Python
海淘零差价,宝贝全球购: 宝贝格子
2016/08/24 全球购物
Probikekit日本:自行车套件,跑步和铁人三项装备
2017/04/03 全球购物
以工厂直接定价的传奇性能:Ben Hogan Golf
2019/01/04 全球购物
德国价格合理的品牌商品购物网站:averdo
2019/03/21 全球购物
整个世界的设计师家具在哈恩:Designathome
2019/03/25 全球购物
建筑自我鉴定
2013/10/19 职场文书
食品营养与检测应届生求职信
2013/11/08 职场文书
大学生收银员求职信分享
2014/01/02 职场文书
鼓励运动员的广播稿
2014/02/08 职场文书
如何写自我鉴定
2014/03/19 职场文书
县政府办公室领导班子个人对照检查材料
2014/09/16 职场文书
大卫科波菲尔读书笔记
2015/06/30 职场文书
导游词之山西-五老峰
2019/10/07 职场文书
节约用水广告语60条
2019/11/14 职场文书
《黑岩★★射手 DAWN FALL》BD发售宣传CM公开
2022/04/04 日漫
MySQL常用慢查询分析工具详解
2022/08/14 MySQL