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

作者：佚名字体：[增加减小] 来源：互联网时间：2017-06-02

本文主要包含css3代码,html5 css3代码,css3代码生成器,css3圆角代码,css3旋转代码等相关知识,佚名希望在学习及工作中可以帮助到您

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

结构分解

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

</div>

<div class="hello-kitty-div">
<div class="face"></div>
<div class="left-ear"></div>
<div class="left-ear-clean"></div>
<div class="left-ear-beautify"></div>
<div class="right-ear"></div>
<div class="right-ear-clean"></div>
<div class="bowknot-outside-left-top-container">
<div class="bowknot-outside-left-top"></div>
</div>
<div class="bowknot-outside-left-bottom-container">
<div class="bowknot-outside-left-bottom"></div>
</div>
<div class="bowknot-outside-right-top-container">
<div class="bowknot-outside-right-top"></div>
</div>
<div class="bowknot-outside-right-bottom-container">
<div class="bowknot-outside-right-bottom"></div>
</div>
<div class="bowknot-inside-left"></div>
<div class="bowknot-inside-right"></div>
<div class="bowknot-inside-center"></div>
<div class="left-eye"></div>
<div class="right-eye"></div>
<div class="nose"></div>
<div class="left-moustache-1"></div>
<div class="left-moustache-2"></div>
<div class="left-moustache-3"></div>
<div class="right-moustache-1"></div>
<div class="right-moustache-2"></div>
<div class="right-moustache-3"></div>
</div>

</div> </div>

开始绘制

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

脸蛋

</div>

.hello-kitty-div .face {
left: 107px;
top: 77px;
width: 747px;

您可能想查找下面的文章:

相关文章

2017-06-02css3与html5实现响应式导航菜单(导航栏)效果分享
2017-06-028款精美的CSS3表单设计(登录表单/下拉选择/按钮附演示及源码)
2017-06-02纯CSS3实现地球自转实现代码(图文教程附送源码)
2017-06-02用CSS禁用输入法(CSS3 UI规范)实例解析
2017-06-02CSS3的transition和animation的用法实例介绍
2017-06-02Css3圆角边框制作代码
2017-06-02CSS3 please 跨浏览器的CSS3产生器
2017-06-02CSS3等相关属性制作分页导航实现代码
2017-06-02详解CSS3的opacity属性设置透明效果的用法
2017-06-02利用HTML5+CSS3实现3D转换效果实例详解