剛學(xué)習(xí)了這個(gè)案例擂红，然后覺(jué)得比較好玩仪际，就練習(xí)了一下。然后發(fā)現(xiàn)其實(shí)也不難昵骤，如果你經(jīng)常使用PS或者Flash的話树碱，應(yīng)該就會(huì)知道畫(huà)個(gè)叮當(dāng)貓是很容易 的事，至少我是這么覺(jué)得涉茧。
作者：來(lái)源：博客園|2015-04-23 15:40
剛學(xué)習(xí)了這個(gè)案例赴恨，然后覺(jué)得比較好玩，就練習(xí)了一下伴栓。然后發(fā)現(xiàn)其實(shí)也不難伦连，如果你經(jīng)常使用PS或者Flash的話，應(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í)話瓷耙，我覺(jué)得挺可愛(ài)的朱躺，小時(shí)候經(jīng)常看多啦A夢(mèng)搁痛，突然感覺(jué)很親切长搀，很童真，瞬間年輕了好多鸡典，哈哈源请！熱烈的笑臉
首先，先把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)仔細(xì)研究一下巢钓，這對(duì)以后想要自己動(dòng)手畫(huà)別的人物形象很有幫助，思路會(huì)比較明朗疗垛。
接下來(lái)症汹，我們按照頭部，脖子贷腕，身體背镇，腳部分別進(jìn)行演示。首先將容器wrapper和叮當(dāng)貓整體做一些基本的樣式泽裳，叮當(dāng)貓整體doraemon 設(shè)置position為relative瞒斩，主要是為了便于 子元素/后代元素進(jìn)行定位。
.wrapper{
margin:50px0?0500px;
}
.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(righttop,#fff10%,#07bbee20%,#10a6ce75%,#000);
background:?-moz-radial-gradient(righttop,#fff10%,#07bbee20%,#10a6ce75%,#000);
background:?-ms-radial-gradient(righttop,#fff10%,#07bbee20%,#10a6ce75%,#000);
border:2pxsolid#555;
box-shadow:-5px10px15pxrgba(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(righttop,#fff75%,#eee80%,#99990%,#444);
background:?-moz-radial-gradient(righttop,#fff75%,#eee80%,#99990%,#444);
background:?–ms-radial-gradient(righttop,#fff75%,#eee80%,#99990%,#444);
}
/*鼻子*/
.doraemon?.face?.nose{
width:30px;
height:30px;
border-radius:15px;
background:#c93300;
border:2pxsolid#000;
position:absolute;
top:110px;
left:140px;
z-index:3;/*鼻子在白色臉底下面*/
}
/*鼻子上的高光*/
.doraemon?.face?.nose?.light?{
width:10px;
height:10px;
border-radius:5px;
box-shadow:19px8px5px#fff;/*通過(guò)陰影實(shí)現(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:3pxsolid#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:2pxsolid#000;
border-radius:35px35px;
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;
/*線性漸變?讓圍巾看上去更自然*/
background:?-webkit-gradient(linear,lefttop,leftbottom,from(#c40),to(#800400));
background:?-moz-linear-gradient(centertop,#c40,#800400);
background:?-ms-linear-gradient(centertop,#c40,#800400);
border:2pxsolid#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:2pxsolid#000;
border-radius:50px;
background:#f9f12a;
background:?-webkit-gradient(linear,lefttop,leftbottom,?from(#f9f12a),color-stop(0.5,#e9e11a),?to(#a9a100));
background:?-moz-linear-gradient(top,#f9f12a,#e9e11a75%,#a9a100);
background:?-ms-linear-gradient(top,#f9f12a,#e9e11a75%,#a9a100);
box-shadow:-5px5px10pxrgba(0,0,0,0.25);
position:absolute;
top:5px;
left:90px;
}
/*雙橫線*/
.doraemon?.choker?.bell_line?{
width:36px;
height:2px;
background:#f9f12a;
border:2pxsolid#333;
border-radius:3px3px0?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)下的線*/
.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:19px8px5px#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,righttop,lefttop,from(#07beea),color-stop(0.5,#0073b3),color-stop(0.75,#00b0e0),?to(#0096be));
background:?-moz-linear-gradient(rightcenter,#07beea,#0073b350%,#00b0e075%,#0096be100%);
background:?-ms-linear-gradient(rightcenter,#07beea,#0073b350%,#00b0e075%,#0096be100%);
border:2pxsolid#333;
position:absolute;
top:265px;
left:50px;
}
/*白色肚兜*/
.doraemon?.bodys?.wraps?{
width:170px;
height:170px;
background:#fff;
background:?-webkit-gradient(linear,righttop,leftbottom,?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(righttop,#fff,#fff75%,#eee83%,#99990%,#44495%,#000);
background:?-ms-linear-gradient(righttop,#fff,#fff75%,#eee83%,#99990%,#44495%,#000);
border:2pxsolid#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,righttop,leftbottom,?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(righttop,#fff,#fff70%,#f8f8f875%,#eee80%,#ddd88%,#fff);
background:?-ms-linear-gradient(righttop,#fff,#fff70%,#f8f8f875%,#eee80%,#ddd88%,#fff);
border:2pxsolid#000;
position:absolute;
top:250px;
left:92px;
}
/*擋住口袋一半*/
.doraemon?.bodys?.pocket_mask?{
width:134px;
height:60px;
background:#fff;
border-bottom:2pxsolid#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,lefttop,leftbottom,?from(#07beea),color-stop(0.85,#07beea),?to(#555));
background:?-moz-linear-gradient(centertop,#07BEEA,#07BEEA85%,#555);
background:?-ms-linear-gradient(centertop,#07BEEA,#07BEEA85%,#555);
border:1pxsolid#000000;
box-shadow:-10px7px10pxrgba(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-7px10pxrgba(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:2pxsolid#000;
background:#fff;
background:?-webkit-gradient(linear,righttop,leftbottom,?from(#fff),color-stop(0.5,#fff),color-stop(0.70,#eee),color-stop(0.8,#ddd),?to(#999));
background:?-moz-linear-gradient(righttop,#fff,#fff50%,#eee70%,#ddd80%,#999);
background:?-ms-linear-gradient(righttop,#fff,#fff50%,#eee70%,#ddd80%,#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,righttop,leftbottom,?from(#fff),color-stop(0.75,#fff),color-stop(0.85,#eee),?to(#999));
background:?-moz-linear-gradient(righttop,#fff,#fff75%,#eee85%,#999);
background:?-ms-linear-gradient(righttop,#fff,#fff75%,#eee85%,#999);
border:2pxsolid#333;
border-radius:80px60px60px40px;
box-shadow:-6px0?10pxrgba(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,righttop,leftbottom,?from(#666),color-stop(0.83,#fff),?to(#fff));
background:?-moz-linear-gradient(righttop,#666,#fff83%,#fff);
background:?-ms-linear-gradient(righttop,#666,#fff83%,#fff);
/*制作半圓效果*/
border:2pxsolid#000;
border-bottom:none;
border-radius:40px40px0?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:?eyemove3s?linear?infinite;
-moz-animation:?eyemove3s?linear?infinite;
-ms-animation:?eyemove3s?linear?infinite;
-o-animation:?eyemove3s?linear?infinite;
animation:?eyemove3s?linear?infinite;
}
/*讓眼睛動(dòng)起來(lái)*/
@-webkit-keyframes?eyemove?{
70%{
margin:0?00?0;
}
80%{
margin:-22px0?00;
}
85%{
margin:-22px0?05px;
}
90%{
margin:-22px10px0?0;
}
93%{
margin:-22px0?00;
}
96%{
margin:0?00?0;
}
}
@-moz-keyframes?eyemove?{
70%{
margin:0?00?0;
}
80%{
margin:-22px0?00;
}
85%{
margin:-22px0?05px;
}
90%{
margin:-22px10px0?0;
}
93%{
margin:-22px0?00;
}
96%{
margin:0?00?0;
}
}
@-o-keyframes?eyemove?{
70%{
margin:0?00?0;
}
80%{
margin:-22px0?00;
}
85%{
margin:-22px0?05px;
}
90%{
margin:-22px10px0?0;
}
93%{
margin:-22px0?00;
}
96%{
margin:0?00?0;
}
}
@keyframes?eyemove?{
70%{
margin:0?00?0;
}
80%{
margin:-22px0?00;
}
85%{
margin:-22px0?05px;
}
90%{
margin:-22px10px0?0;
}
93%{
margin:-22px0?00;
}
96%{
margin:0?00?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)！
附上源代碼：
