剛學(xué)習(xí)了這個案例，然后覺得比較好玩，就練習(xí)了一下。然后發(fā)現(xiàn)其實也不難，如果你經(jīng)常使用PS或者Flash的話，應(yīng)該就會知道畫個叮當(dāng)貓是很容易 的事，至少我是這么覺得。但是，用CSS3畫出來確實是第一次接觸，所以很樂意去嘗試一下，對于我這種菜鳥，確實是幫助不少，至少懂得如何去畫一個簡單的 人物形象出來，再加上一些動畫效果，就活了，那就更好玩了！OK，開始之前，先把效果圖曬一下：
PS:說實話，我覺得挺可愛的，小時候經(jīng)?？炊嗬睞夢，突然感覺很親切，很童真，瞬間年輕了好多，哈哈！熱烈的笑臉
首先，先把HTML結(jié)構(gòu)搭建好：
div class="wrapper">
!--叮當(dāng)貓整體-->
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>
!--遮住一半口袋，使其呈現(xiàn)半圓-->
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>
最好先把叮當(dāng)貓的整體結(jié)構(gòu)仔細研究一下，這對以后想要自己動手畫別的人物形象很有幫助，思路會比較明朗。
接下來，我們按照頭部，脖子，身體，腳部分別進行演示。首先將容器wrapper和叮當(dāng)貓整體做一些基本的樣式，叮當(dāng)貓整體doraemon 設(shè)置position為relative，主要是為了便于 子元素/后代元素進行定位。
.wrapper{
margin: 50px 0 0 500px;
}
.doraemon{
position: relative;
}
頭部head的樣式，因為叮當(dāng)貓的頭部不是正圓，所以寬高有一點偏差，然后使用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; /*設(shè)置寬高*/
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; /*通過陰影實現(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;
/*通過底邊框加上圓角模擬微笑嘴巴*/
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;
}
寫了這么多樣式，結(jié)果是怎么樣的呢：
生病 怎么看都覺得別扭，哦！還差胡須須和白色臉底的邊框呢，咱給補上：
/*胡須背景，主要用于擋住嘴巴的一部分，不要顯得太長*/
.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);
}
微笑 這樣就對了，看著多舒服??！趁熱打鐵，做脖子和身體：
/*圍脖*/
.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;
}
好吧，脖子和身子都有啦！上圖：
現(xiàn)在看起來有點像擺設(shè)品，不過笑容還是那么單純，好了，趕緊把手腳做出來：
/
*左右手*/
.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é)果：
看一下，效果是不是和一開始的一樣呢 大笑 ，雖然做好了，但是還是可以讓它動起來的，比如眼睛，我們可以給它加個動畫效果，讓眼睛轉(zhuǎn)動起來：
/*眼珠*/
.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，這樣，眼睛就會動了，有興趣的可以試一下，這里就無法展示了。但是如果你有什么更好的動畫效果也可以嘗試，那么這個案例就結(jié)束了。
PS：雖然這只是一個案例，不過確實幫助我開闊思維，而且其實做一個這樣的效果，可能會花費很多時間，至少對我來說目前確實是這樣子，主要難點還是布局定位和顏色的合理搭配，才能使形象更加逼真生動！可能也有人對PS或者Flash等圖形處理軟件不是很熟，對用CSS3畫出一些人物或者其他效果比較沒有頭緒，那么就可以去一些網(wǎng)站參考設(shè)計師們的設(shè)計構(gòu)圖，圖形分解等相關(guān)設(shè)計知識，幫助我們更好地理解。
以上是本文的全部內(nèi)容，希望大家可以喜歡，動手去實踐一下。
您可能感興趣的文章:- Css3制作變形與動畫效果
- CSS3實現(xiàn)動態(tài)背景登錄框的代碼
