如何使用CSS3畫出一個(gè)叮當(dāng)貓
更新時(shí)間：2015年07月29日 08:49:32 投稿：lijiao
我們經(jīng)常使用PS或者Flash制作動(dòng)畫，本文則介紹了如何用CSS3畫出個(gè)叮當(dāng)貓，實(shí)現(xiàn)過程很有趣，感興趣的朋友可以參考一下
剛學(xué)習(xí)了這個(gè)案例，然后覺得比較好玩，就練習(xí)了一下。然后發(fā)現(xiàn)其實(shí)也不難，如果你經(jīng)常使用PS或者Flash的話，應(yīng)該就會(huì)知道畫個(gè)叮當(dāng)貓是很容易 的事，至少我是這么覺得。但是，用CSS3畫出來確實(shí)是第一次接觸，所以很樂意去嘗試一下，對(duì)于我這種菜鳥，確實(shí)是幫助不少，至少懂得如何去畫一個(gè)簡(jiǎn)單的 人物形象出來，再加上一些動(dòng)畫效果，就活了，那就更好玩了！OK，開始之前，先把效果圖曬一下：
PS:說實(shí)話，我覺得挺可愛的，小時(shí)候經(jīng)?？炊嗬睞夢(mè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)仔細(xì)研究一下，這對(duì)以后想要自己動(dòng)手畫別的人物形象很有幫助，思路會(huì)比較明朗。
接下來，我們按照頭部，脖子，身體，腳部分別進(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將頭部從矩形變成橢圓形，然后再使用徑向漸變從右上角給背景來個(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 ,這么丑，別急，慢慢讓它活過來：
/*臉部*/
.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; /*通過陰影實(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;
/*通過底邊框加上圓角模擬微笑嘴巴*/
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é)果是怎么樣的呢：
生病 怎么看都覺得別扭，哦！還差胡須須和白色臉底的邊框呢，咱給補(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,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;
}
/*黑點(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: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)在看起來有點(diǎ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é)果：
看一下，效果是不是和一開始的一樣呢 大笑 ，雖然做好了，但是還是可以讓它動(dòng)起來的，比如眼睛，我們可以給它加個(gè)動(dòng)畫效果，讓眼睛轉(zhuǎn)動(dòng)起來：
/*眼珠*/
.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)起來*/
@-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)了，有興趣的可以試一下，這里就無法展示了。但是如果你有什么更好的動(dòng)畫效果也可以嘗試，那么這個(gè)案例就結(jié)束了。
PS：雖然這只是一個(gè)案例，不過確實(shí)幫助我開闊思維，而且其實(shí)做一個(gè)這樣的效果，可能會(huì)花費(fèi)很多時(shí)間，至少對(duì)我來說目前確實(shí)是這樣子，主要難點(diǎn)還是布局定位和顏色的合理搭配，才能使形象更加逼真生動(dòng)！可能也有人對(duì)PS或者Flash等圖形處理軟件不是很熟，對(duì)用CSS3畫出一些人物或者其他效果比較沒有頭緒，那么就可以去一些網(wǎng)站參考設(shè)計(jì)師們的設(shè)計(jì)構(gòu)圖，圖形分解等相關(guān)設(shè)計(jì)知識(shí)，幫助我們更好地理解。
以上是本文的全部?jī)?nèi)容，希望大家可以喜歡，動(dòng)手去實(shí)踐一下。
相關(guān)文章
用CSS實(shí)現(xiàn)鼠標(biāo)單擊特效...2006-09-09
一些CSS定義虛線實(shí)例代碼2006-09-09
在默認(rèn)情況下，F(xiàn)F和IE的解釋標(biāo)準(zhǔn)是不一樣的，也就是說，如果一個(gè)網(wǎng)頁沒有聲明DOCTYPE，它就會(huì)以默認(rèn)的DOCTYPE解釋下面的HTML。在同 一種標(biāo)準(zhǔn)下，不同瀏覽器的解釋模型都有所差異，2014-05-05
網(wǎng)頁美工制作規(guī)范...2006-08-08
本文介紹了CSS中的各類居中方式，8種方式的實(shí)現(xiàn)方法講解的很詳細(xì)，還配有對(duì)應(yīng)的效果圖,需要的朋友可以參考下2015-07-07
表格斜線...2006-09-09
使用#default#userdata組件實(shí)現(xiàn)的可記憶內(nèi)容的編輯器
使用#default#userdata組件實(shí)現(xiàn)的可記憶內(nèi)容的編輯器...2006-08-08
全面考察“禁用瀏覽器后退”...2006-10-10
淺談?dòng)蓀osition屬性引申的css進(jìn)階討論
說到position，稍微對(duì)css了解的能馬上說出四個(gè)屬性值：static 、relative、absolute、fixed。更深一步去討論，牽扯出諸如上文提到的normal flow、containing block、bfc、margin collapse，base line，有多少人能很好的回答完整呢，所以在此做一個(gè)自己的總結(jié)歸納。2021-05-05
CSS中的滑動(dòng)門技術(shù)...2006-09-09