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

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

结构分解

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

CSS Code复制内容到剪贴板

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

开始绘制

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

脸蛋

CSS Code复制内容到剪贴板

.hello-kitty-div .face {   

    left: 107px;   

    top: 77px;   

    width: 747px;   

    height: 566px;   

（编辑：PHP编程网 - 黄冈站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!