剛學習了這個案例，然后覺得比較好玩，就練習了一下。然后發現其實也不難，如果你經常使用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畫出一些人物或者其他效果比較沒有頭緒，那么就可以去一些網站參考設計師們的設計構圖，圖形分解等相關設計知識，幫助我們更好地理解。

以上是本文的全部內容，希望大家可以喜歡，動手去實踐一下。