如何使用CSS3画出一个叮当猫

刚学习了这个案例，然后觉得比较好玩，就练习了一下。然后发现其实也不难，如果你经常使用PS或者Flash的话，应该就会知道画个叮当猫是很容易 的事，至少我是这么觉得。但是，用CSS3画出来确实是第一次接触，所以很乐意去尝试一下，对于我这种菜鸟，确实是帮助不少，至少懂得如何去画一个简单的 人物形象出来，再加上一些动画效果，就活了，那就更好玩了！OK，开始之前，先把效果图晒一下：

PS:说实话，我觉得挺可爱的，小时候经常看多啦A梦，突然感觉很亲切，很童真，瞬间年轻了好多，哈哈！热烈的笑脸

首先，先把HTML结构搭建好：

<div class="wrapper">
 <!--叮当猫整体-->
 <div class="doraemon">
 <!--头部-->
 <div class="head">
 <!--眼睛-->
 <div class="eyes">
 <div class="eye left">
  <!--眼珠-->
  <div class="black bleft"></div>
 </div>
 <div class="eye right">
  <div class="black bright"></div>
 </div>
 </div>
 <!--脸部-->
 <div class="face">
 <!--白色脸底-->
 <div class="white"></div>
 <!--鼻子-->
 <div class="nose">
  <!--鼻子高光部分-->
  <div class="light"></div>
 </div>
 <!--鼻子的竖线-->
 <div class="nose_line"></div>
 <!--嘴巴-->
 <div class="mouth"></div>
 <!--胡须-->
 <div class="whiskers">
  <div class="whisker rTop r160"></div>
  <div class="whisker rMiddle"></div>
  <div class="whisker rBottom r20"></div>
  <div class="whisker lTop r20"></div>
  <div class="whisker lMiddle"></div>
  <div class="whisker lBottom r160"></div>
 </div>
 </div>
 </div>
 <!--脖子和铃铛-->
 <div class="choker">
 <!--铃铛-->
 <div class="bell">
 <div class="bell_line"></div>
 <div class="bell_circle"></div>
 <div class="bell_under"></div>
 <div class="bell_light"></div>
 </div>
 </div>
 <!--身体-->
 <div class="bodys">
 <!--肚子-->
 <div class="body"></div>
 <!--肚兜-->
 <div class="wraps"></div>
 <!--口袋-->
 <div class="pocket"></div>
 <!--遮住一半口袋，使其呈现半圆-->
 <div class="pocket_mask"></div>
 </div>
 <!--右手-->
 <div class="hand_right">
 <!--手臂-->
 <div class="arm"></div>
 <!--手掌-->
 <div class="circle"></div>
 <!--遮住手臂和身子交接处的线-->
 <div class="arm_rewrite"></div>
 </div>
 <!--左手-->
 <div class="hand_left">
 <div class="arm"></div>
 <div class="circle"></div>
 <div class="arm_rewrite"></div>
 </div>
 <!--脚-->
 <div class="foot">
 <div class="left"></div>
 <div class="right"></div>
 <!--双脚之间的缝隙-->
 <div class="foot_rewrite"></div>
 </div>
 </div>
</div>

最好先把叮当猫的整体结构仔细研究一下，这对以后想要自己动手画别的人物形象很有帮助，思路会比较明朗。

接下来，我们按照头部，脖子，身体，脚部分别进行演示。首先将容器wrapper和叮当猫整体做一些基本的样式，叮当猫整体doraemon 设置position为relative，主要是为了便于 子元素/后代元素进行定位。

.wrapper{
 margin: 50px 0 0 500px;
}
.doraemon{
 position: relative;
}

头部head的样式，因为叮当猫的头部不是正圆，所以宽高有一点偏差，然后使用border-radius将头部从矩形变成椭圆形，然后再使用径向渐变从右上角给背景来个放射性渐变，然后在加个阴影，使其更有立体感，background：#07bbee;是为了兼容低版本浏览器：

.doraemon .head {
 position:relative;
 width: 320px;
 height: 300px;
 border-radius: 150px;
 background: #07bbee;
 background: -webkit-radial-gradient(right top,#fff 10%,#07bbee 20%,#10a6ce 75%,#000);
 background: -moz-radial-gradient(right top,#fff 10%,#07bbee 20%,#10a6ce 75%,#000);
 background: -ms-radial-gradient(right top,#fff 10%,#07bbee 20%,#10a6ce 75%,#000);
 border:2px solid #555;
 box-shadow:-5px 10px 15px rgba(0,0,0,0.45);
}