剛學(xué)習(xí)了這個(gè)案例，然后覺(jué)得比較好玩，就練習(xí)了一下。然后發(fā)現(xiàn)其實(shí)也不難，如果你經(jīng)常使用PS或者Flash的話(huà)，應(yīng)該就會(huì)知道畫(huà)個(gè)叮當(dāng)貓是很容易 的事，至少我是這么覺(jué)得。但是，用CSS3畫(huà)出來(lái)確實(shí)是第一次接觸，所以很樂(lè)意去嘗試一下，對(duì)于我這種菜鳥(niǎo)，確實(shí)是幫助不少，至少懂得如何去畫(huà)一個(gè)簡(jiǎn)單的 人物形象出來(lái)，再加上一些動(dòng)畫(huà)效果，就活了，那就更好玩了！OK，開(kāi)始之前，先把效果圖曬一下：

PS:說(shuō)實(shí)話(huà)，我覺(jué)得挺可愛(ài)的，小時(shí)候經(jīng)常看多啦A夢(mèng)，突然感覺(jué)很親切，很童真，瞬間年輕了好多，哈哈！熱烈的笑臉

首先，先把HTML結(jié)構(gòu)搭建好：

<div>  <!--叮當(dāng)貓整體-->  <div>  <!--頭部-->  <div>  <!--眼睛-->  <div>  <div>   <!--眼珠-->   <div></div>  </div>  <div>   <div></div>  </div>  </div>  <!--臉部-->  <div>  <!--白色臉底-->  <div></div>  <!--鼻子-->  <div>   <!--鼻子高光部分-->   <div></div>  </div>  <!--鼻子的豎線(xiàn)-->  <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>  <!--遮住一半口袋，使其呈現(xiàn)半圓-->  <div></div>  </div>  <!--右手-->  <div>  <!--手臂-->  <div></div>  <!--手掌-->  <div></div>  <!--遮住手臂和身子交接處的線(xiàn)-->  <div></div>  </div>  <!--左手-->  <div>  <div></div>  <div></div>  <div></div>  </div>  <!--腳-->  <div>  <div></div>  <div></div>  <!--雙腳之間的縫隙-->  <div></div>  </div>  </div> </div>

最好先把叮當(dāng)貓的整體結(jié)構(gòu)仔細(xì)研究一下，這對(duì)以后想要自己動(dòng)手畫(huà)別的人物形象很有幫助，思路會(huì)比較明朗。

接下來(lái)，我們按照頭部，脖子，身體，腳部分別進(jìn)行演示。首先將容器wrapper和叮當(dāng)貓整體做一些基本的樣式，叮當(dāng)貓整體doraemon 設(shè)置position為relative，主要是為了便于 子元素/后代元素進(jìn)行定位。

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

頭部head的樣式，因?yàn)槎．?dāng)貓的頭部不是正圓，所以寬高有一點(diǎn)偏差，然后使用border-radius將頭部從矩形變成橢圓形，然后再使用徑向漸變從右上角給背景來(lái)個(gè)放射性漸變，然后在加個(gè)陰影，使其更有立體感，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 ,這么丑，別急，慢慢讓它活過(guò)來(lái)：

/*臉部*/  .doraemon .face {  position: relative; /*讓所有臉部元素可自由定位*/  z-index: 2; /*臉在頭部背景上面*/  }  /*白色臉底*/  .doraemon .face .white {  width: 265px; /*設(shè)置寬高*/  height: 195px;  border-radius: 150px;  position: absolute; /*進(jìn)行絕對(duì)定位*/  top: 75px;  left: 25px;  background: #fff;  /*此放射漸變也是使臉的左下角暗一些，看上去更真實(shí)*/  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; /*通過(guò)陰影實(shí)現(xiàn)高光*/  }  /*鼻子下的線(xiàn)*/  .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;  /*通過(guò)底邊框加上圓角模擬微笑嘴巴*/  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;  } 

寫(xiě)了這么多樣式，結(jié)果是怎么樣的呢：

生病 怎么看都覺(jué)得別扭，哦！還差胡須須和白色臉底的邊框呢，咱給補(bǔ)上：

/*胡須背景，主要用于擋住嘴巴的一部分，不要顯得太長(zhǎng)*/  .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;  }  /*胡子旋轉(zhuǎn)角度*/  .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);  } 

微笑 這樣就對(duì)了，看著多舒服啊！趁熱打鐵，做脖子和身體：

/*圍脖*/  .doraemon .choker {  width: 230px;  height: 20px;  background: #c40;  /*線(xiàn)性漸變 讓圍巾看上去更自然*/  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;  }  /*雙橫線(xiàn)*/  .doraemon .choker .bell_line {  width: 36px;  height: 2px;  background: #f9f12a;  border: 2px solid #333;  border-radius: 3px 3px 0 0;  position: absolute;  top: 10px;  }  /*黑點(diǎn)*/  .doraemon .choker .bell_circle{  width:12px;  height:10px;  background:#000;  border-radius:5px;  position:absolute;  top:20px;  left:14px;  }  /*黑點(diǎn)下的線(xiàn)*/  .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;  }

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

現(xiàn)在看起來(lái)有點(diǎn)像擺設(shè)品，不過(guò)笑容還是那么單純，好了，趕緊把手腳做出來(lái)：

/

*左右手*/  .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;  }  /*手臂和身體結(jié)合處，使用背景遮住邊框*/  .doraemon .arm_rewrite {  height: 45px;  width: 5px;  background: #07beea;  position: relative;  }  /*右手結(jié)合處*/  .doraemon .hand_right .arm_rewrite {  top: -45px;  left: 22px;  }  /*左手結(jié)合處*/  .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;  } 

好了，最后完整結(jié)果：

看一下，效果是不是和一開(kāi)始的一樣呢 大笑 ，雖然做好了，但是還是可以讓它動(dòng)起來(lái)的，比如眼睛，我們可以給它加個(gè)動(dòng)畫(huà)效果，讓眼睛轉(zhuǎn)動(dòng)起來(lái)：

/*眼珠*/  .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;  }   /*讓眼睛動(dòng)起來(lái)*/  @-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，這樣，眼睛就會(huì)動(dòng)了，有興趣的可以試一下，這里就無(wú)法展示了。但是如果你有什么更好的動(dòng)畫(huà)效果也可以嘗試，那么這個(gè)案例就結(jié)束了。

PS：雖然這只是一個(gè)案例，不過(guò)確實(shí)幫助我開(kāi)闊思維，而且其實(shí)做一個(gè)這樣的效果，可能會(huì)花費(fèi)很多時(shí)間，至少對(duì)我來(lái)說(shuō)目前確實(shí)是這樣子，主要難點(diǎn)還是布局定位和顏色的合理搭配，才能使形象更加逼真生動(dòng)！可能也有人對(duì)PS或者Flash等圖形處理軟件不是很熟，對(duì)用CSS3畫(huà)出一些人物或者其他效果比較沒(méi)有頭緒，那么就可以去一些網(wǎng)站參考設(shè)計(jì)師們的設(shè)計(jì)構(gòu)圖，圖形分解等相關(guān)設(shè)計(jì)知識(shí)，幫助我們更好地理解。

以上是本文的全部?jī)?nèi)容，希望大家可以喜歡，動(dòng)手去實(shí)踐一下。