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

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

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

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

<div>  <!--叮当猫整体-->  <div>  <!--头部-->  <div>  <!--眼睛-->  <div>  <div>   <!--眼珠-->   <div></div>  </div>  <div>   <div></div>  </div>  </div>  <!--脸部-->  <div>  <!--白色脸底-->  <div></div>  <!--鼻子-->  <div>   <!--鼻子高光部分-->   <div></div>  </div>  <!--鼻子的竖线-->  <div></div>  <!--嘴巴-->  <div></div>  <!--胡须-->  <div>   <div></div>   <div></div>   <div></div>   <div></div>   <div></div>   <div></div>  </div>  </div>  </div>  <!--脖子和铃铛-->  <div>  <!--铃铛-->  <div>  <div></div>  <div></div>  <div></div>  <div></div>  </div>  </div>  <!--身体-->  <div>  <!--肚子-->  <div></div>  <!--肚兜-->  <div></div>  <!--口袋-->  <div></div>  <!--遮住一半口袋，使其呈现半圆-->  <div></div>  </div>  <!--右手-->  <div>  <!--手臂-->  <div></div>  <!--手掌-->  <div></div>  <!--遮住手臂和身子交接处的线-->  <div></div>  </div>  <!--左手-->  <div>  <div></div>  <div></div>  <div></div>  </div>  <!--脚-->  <div>  <div></div>  <div></div>  <!--双脚之间的缝隙-->  <div></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); } 

看看效果到底怎么样：

惊讶 shenmgui ,这么丑，别急，慢慢让它活过来：

/*脸部*/  .doraemon .face {  position: relative; /*让所有脸部元素可自由定位*/  z-index: 2; /*脸在头部背景上面*/  }  /*白色脸底*/  .doraemon .face .white {  width: 265px; /*设置宽高*/  height: 195px;  border-radius: 150px;  position: absolute; /*进行绝对定位*/  top: 75px;  left: 25px;  background: #fff;  /*此放射渐变也是使脸的左下角暗一些，看上去更真实*/  background: -webkit-radial-gradient(right top,#fff 75%,#eee 80%,#999 90%,#444);  background: -moz-radial-gradient(right top,#fff 75%,#eee 80%,#999 90%,#444);  background: –ms-radial-gradient(right top,#fff 75%,#eee 80%,#999 90%,#444);  }  /*鼻子*/  .doraemon .face .nose{  width:30px;  height:30px;  border-radius:15px;  background:#c93300;  border:2px solid #000;  position:absolute;  top:110px;  left:140px;  z-index:3; /*鼻子在白色脸底下面*/  }  /*鼻子上的高光*/  .doraemon .face .nose .light {  width:10px;  height:10px;  border-radius: 5px;  box-shadow: 19px 8px 5px #fff; /*通过阴影实现高光*/  }  /*鼻子下的线*/  .doraemon .face .nose_line{  width:3px;  height:100px;  background:#333;  position:absolute;  top:143px;  left:155px;  z-index:3;  }  /*嘴巴*/  .doraemon .face .mouth{  width:220px;  height:400px;  /*通过底边框加上圆角模拟微笑嘴巴*/  border-bottom:3px solid #333;  border-radius:120px;  position:absolute;  top:-160px;  left:45px;  }  /*眼睛*/  .doraemon .eyes {  position: relative;  z-index: 3; /*眼睛在白色脸底下面*/  }  /*眼睛共同的样式*/  .doraemon .eyes .eye{  width:72px;  height:82px;  background:#fff;  border:2px solid #000;  border-radius:35px 35px;  position:absolute;  top:40px;  }  /*眼珠*/  .doraemon .eyes .eye .black{  width:14px;  height:14px;  background:#000;  border-radius:7px;  position:absolute;  top:40px;  }  .doraemon .eyes .left{  left:82px;  }  .doraemon .eyes .right {  left: 156px;  }  .doraemon .eyes .eye .bleft {  left: 50px;  }   .doraemon .eyes .eye .bright {  left: 7px;  } 

写了这么多样式，结果是怎么样的呢：

生病 怎么看都觉得别扭，哦！还差胡须须和白色脸底的边框呢，咱给补上：

/*胡须背景，主要用于挡住嘴巴的一部分，不要显得太长*/  .doraemon .whiskers{  width:220px;  height:80px;  background:#fff;  border-radius:15px;  position:absolute;  top:120px;  left:45px;  z-index:2; /*在鼻子和眼睛下面*/  }  /*所有胡子的公用样式*/  .doraemon .whiskers .whisker {  width: 60px;  height: 2px;  background: #333;  position: absolute;  z-index: 2;  }  /*右上胡子*/  .doraemon .whiskers .rTop {  left: 165px;  top: 25px;  }  /*右中胡子*/  .doraemon .whiskers .rMiddle {  left: 167px;  top: 45px;  }  /*右下胡子*/  .doraemon .whiskers .rBottom {  left: 165px;  top: 65px;  }  /*左上胡子*/  .doraemon .whiskers .lTop {  left: 0;  top: 25px;  }  /*左中胡子*/  .doraemon .whiskers .lMiddle {  left: -2px;  top: 45px;  }  /*左下胡子*/  .doraemon .whiskers .lBottom {  left: 0;  top: 65px;  }  /*胡子旋转角度*/  .doraemon .whiskers .r160 {  -webkit-transform: rotate(160deg);  -moz-transform: rotate(160deg);  -ms-transform: rotate(160deg);  -o-transform: rotate(160deg);  transform: rotate(160deg);  }  .doraemon .whiskers .r20 {  -webkit-transform: rotate(200deg);  -moz-transform: rotate(200deg);  -ms-transform: rotate(200deg);  -o-transform: rotate(200deg);  transform: rotate(200deg);  } 

微笑 这样就对了，看着多舒服啊！趁热打铁，做脖子和身体：

/*围脖*/  .doraemon .choker {  width: 230px;  height: 20px;  background: #c40;  /*线性渐变 让围巾看上去更自然*/  background: -webkit-gradient(linear,left top,left bottom,from(#c40),to(#800400));  background: -moz-linear-gradient(center top,#c40,#800400);  background: -ms-linear-gradient(center top,#c40,#800400);  border: 2px solid #000;  border-radius: 10px;  position: relative;  top: -40px;  left: 45px;  z-index: 4;  }  /*铃铛*/  .doraemon .choker .bell {  width: 40px;  height: 40px;  _overflow: hidden; /*IE6 hack*/  border: 2px solid #000;  border-radius: 50px;  background: #f9f12a;  background: -webkit-gradient(linear, left top, left bottom, from(#f9f12a),color-stop(0.5, #e9e11a), to(#a9a100));  background: -moz-linear-gradient(top, #f9f12a, #e9e11a 75%,#a9a100);  background: -ms-linear-gradient(top, #f9f12a, #e9e11a 75%,#a9a100);  box-shadow: -5px 5px 10px rgba(0,0,0,0.25);  position: absolute;  top: 5px;  left: 90px;  }  /*双横线*/  .doraemon .choker .bell_line {  width: 36px;  height: 2px;  background: #f9f12a;  border: 2px solid #333;  border-radius: 3px 3px 0 0;  position: absolute;  top: 10px;  }  /*黑点*/  .doraemon .choker .bell_circle{  width:12px;  height:10px;  background:#000;  border-radius:5px;  position:absolute;  top:20px;  left:14px;  }  /*黑点下的线*/  .doraemon .choker .bell_under{  width: 3px;  height:15px;  background:#000;  position:absolute;  left: 18px;  top:27px;  }  /*铃铛高光*/  .doraemon .choker .bell_light{  width:12px;  height:12px;  border-radius:10px;  box-shadow:19px 8px 5px #fff;  position:absolute;  top:-5px;  left:5px;  opacity:0.7;  }  /*身子*/  .doraemon .bodys {  position: relative;  top: -310px;  }  /*肚子*/  .doraemon .bodys .body {  width: 220px;  height: 165px;  background: #07beea;  background: -webkit-gradient(linear,right top,left top,from(#07beea),color-stop(0.5, #0073b3),color-stop(0.75,#00b0e0), to(#0096be));  background: -moz-linear-gradient(right center,#07beea,#0073b3 50%,#00b0e0 75%,#0096be 100%);  background: -ms-linear-gradient(right center,#07beea,#0073b3 50%,#00b0e0 75%,#0096be 100%);  border:2px solid #333;  position:absolute;  top:265px;  left:50px;  }  /*白色肚兜*/  .doraemon .bodys .wraps {  width: 170px;  height: 170px;  background: #fff;  background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.75,#fff),color-stop(0.83,#eee),color-stop(0.90,#999),color-stop(0.95,#444), to(#000));  background: -moz-linear-gradient(right top,#fff,#fff 75%,#eee 83%,#999 90%,#444 95%,#000);  background: -ms-linear-gradient(right top,#fff,#fff 75%,#eee 83%,#999 90%,#444 95%,#000);  border: 2px solid #000;  border-radius: 85px;  position: absolute;  left: 72px;  top: 230px;  }  /*口袋*/  .doraemon .bodys .pocket {  width: 130px;  height: 130px;  border-radius: 65px;  background: #fff;  background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.70,#fff),color-stop(0.75,#f8f8f8),color-stop(0.80,#eee),color-stop(0.88,#ddd), to(#fff));  background: -moz-linear-gradient(right top, #fff, #fff 70%,#f8f8f8 75%,#eee 80%,#ddd 88%, #fff);  background: -ms-linear-gradient(right top, #fff, #fff 70%,#f8f8f8 75%,#eee 80%,#ddd 88%, #fff);  border: 2px solid #000;  position:absolute;  top: 250px;  left: 92px;  }  /*挡住口袋一半*/  .doraemon .bodys .pocket_mask {  width: 134px;  height: 60px;  background:#fff;  border-bottom: 2px solid #000;  position:absolute;  top: 259px;  left: 92px;  }

好吧，脖子和身子都有啦！上图：

现在看起来有点像摆设品，不过笑容还是那么单纯，好了，赶紧把手脚做出来：

/

*左右手*/  .doraemon .hand_right, .doraemon .hand_left {  height: 100px;  width: 100px;  position: absolute;  top: 272px;  left: 248px;  }  /*左手*/  .doraemon .hand_left {  left: -10px;  }  /*手臂公共部分*/  .doraemon .arm {  width:80px;  height:50px;  background: #07beea;  background: -webkit-gradient(linear, left top, left bottom, from(#07beea),color-stop(0.85,#07beea), to(#555));  background: -moz-linear-gradient(center top, #07BEEA, #07BEEA 85%, #555);  background: -ms-linear-gradient(center top, #07BEEA, #07BEEA 85%, #555);  border: 1px solid #000000;  box-shadow: -10px 7px 10px rgba(0, 0, 0, 0.35);  z-index: -1;  position: relative;  }  /*右手手臂*/  .doraemon .hand_right .arm {  top: 17px;  -webkit-transform: rotate(35deg);  -moz-transform: rotate(35deg);  -ms-transform: rotate(35deg);  -o-transform: rotate(35deg);  transform: rotate(35deg);  }  /*左手手臂*/  .doraemon .hand_left .arm {  top: 17px;  background: #0096be; /*背光一面使用纯色，使其有立体感*/  box-shadow: 5px -7px 10px rgba(0, 0, 0, 0.25);  -webkit-transform: rotate(145deg);  -moz-transform: rotate(145deg);  -ms-transform: rotate(145deg);  -o-transform: rotate(145deg);  transform: rotate(145deg);  }  /*圆形手掌公共部分*/  .doraemon .circle {  width: 60px;  height: 60px;  border-radius: 30px;  border: 2px solid #000;  background: #fff;  background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.5,#fff),color-stop(0.70,#eee),color-stop(0.8,#ddd), to(#999));  background: -moz-linear-gradient(right top, #fff, #fff 50%, #eee 70%, #ddd 80%,#999);  background: -ms-linear-gradient(right top, #fff, #fff 50%, #eee 70%, #ddd 80%,#999);  position: absolute;  }  /*右手手掌*/  .doraemon .hand_right .circle {  left: 40px;  top: 32px;  }  /*左手手掌*/  .doraemon .hand_left .circle {  left: -20px;  top: 32px;  }  /*手臂和身体结合处，使用背景遮住边框*/  .doraemon .arm_rewrite {  height: 45px;  width: 5px;  background: #07beea;  position: relative;  }  /*右手结合处*/  .doraemon .hand_right .arm_rewrite {  top: -45px;  left: 22px;  }  /*左手结合处*/  .doraemon .hand_left .arm_rewrite {  top: -45px;  left: 60px;  background: #0096be; /*同理，背光一面使用纯色，使其有立体感*/  }  /*脚部*/  .doraemon .foot {  width: 280px;  height: 40px;  position: relative;  top: 55px;  left: 20px;  }  /*左右脚共同样式*/  .doraemon .foot .left, .doraemon .foot .right {  width: 125px;  height: 30px;  background: #fff;  background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.75,#fff),color-stop(0.85,#eee), to(#999));  background: -moz-linear-gradient(right top, #fff, #fff 75%, #eee 85%, #999);  background: -ms-linear-gradient(right top, #fff, #fff 75%, #eee 85%, #999);  border: 2px solid #333;  border-radius: 80px 60px 60px 40px;  box-shadow: -6px 0 10px rgba(0, 0, 0, 0.35);  position: relative;  }  .doraemon .foot .left {  left: 8px;  top: 65px;  }   .doraemon .foot .right {  top: 31px;  left: 141px;  }  /*双脚之间的缝隙，加阴影使用立体感*/  .doraemon .foot .foot_rewrite {  width: 20px;  height: 10px;  background: #fff;  background: -webkit-gradient(linear, right top, left bottom, from(#666),color-stop(0.83,#fff), to(#fff));  background: -moz-linear-gradient(right top, #666, #fff 83%, #fff);  background: -ms-linear-gradient(right top, #666, #fff 83%, #fff);  /*制作半圆效果*/  border: 2px solid #000;  border-bottom: none;  border-radius: 40px 40px 0 0;  position: relative;  top: -11px;  left: 130px;  _left: 127px;  } 

好了，最后完整结果：

看一下，效果是不是和一开始的一样呢 大笑 ，虽然做好了，但是还是可以让它动起来的，比如眼睛，我们可以给它加个动画效果，让眼睛转动起来：

/*眼珠*/  .doraemon .eyes .eye .black {  width: 14px;  height: 14px;  background: #000;  border-radius: 7px;  position: absolute;  top: 40px;  -webkit-animation: eyemove 3s linear infinite;  -moz-animation: eyemove 3s linear infinite;  -ms-animation: eyemove 3s linear infinite;  -o-animation: eyemove 3s linear infinite;  animation: eyemove 3s linear infinite;  }   /*让眼睛动起来*/  @-webkit-keyframes eyemove {  70%{  margin:0 0 0 0;  }  80% {  margin: -22px 0 0 0;  }   85% {  margin: -22px 0 0 5px;  }   90% {  margin: -22px 10px 0 0;  }   93% {  margin: -22px 0 0 0;  }   96% {  margin: 0 0 0 0;  }  }   @-moz-keyframes eyemove {  70% {  margin: 0 0 0 0;  }   80% {  margin: -22px 0 0 0;  }   85% {  margin: -22px 0 0 5px;  }   90% {  margin: -22px 10px 0 0;  }   93% {  margin: -22px 0 0 0;  }   96% {  margin: 0 0 0 0;  }  }   @-o-keyframes eyemove {  70% {  margin: 0 0 0 0;  }   80% {  margin: -22px 0 0 0;  }   85% {  margin: -22px 0 0 5px;  }   90% {  margin: -22px 10px 0 0;  }   93% {  margin: -22px 0 0 0;  }   96% {  margin: 0 0 0 0;  }  }  @keyframes eyemove {  70% {  margin: 0 0 0 0;  }   80% {  margin: -22px 0 0 0;  }   85% {  margin: -22px 0 0 5px;  }   90% {  margin: -22px 10px 0 0;  }   93% {  margin: -22px 0 0 0;  }   96% {  margin: 0 0 0 0;  }  } 

OK，这样，眼睛就会动了，有兴趣的可以试一下，这里就无法展示了。但是如果你有什么更好的动画效果也可以尝试，那么这个案例就结束了。

PS：虽然这只是一个案例，不过确实帮助我开阔思维，而且其实做一个这样的效果，可能会花费很多时间，至少对我来说目前确实是这样子，主要难点还是布局定位和颜色的合理搭配，才能使形象更加逼真生动！可能也有人对PS或者Flash等图形处理软件不是很熟，对用CSS3画出一些人物或者其他效果比较没有头绪，那么就可以去一些网站参考设计师们的设计构图，图形分解等相关设计知识，帮助我们更好地理解。

以上是本文的全部内容，希望大家可以喜欢，动手去实践一下。