如何使用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）; }

看看效果到底怎么样：

惊讶 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画出一些人物或者其他效果比较没有头绪，那么就可以去一些网站参考设计师们的设计构图，图形分解等相关设计知识，帮助我们更好地理解。
以上是本文的全部内容，希望大家可以喜欢，动手去实践一下。