刚学这个案例，然后觉得很好玩，就练了。后来我发现并不难。如果你经常用PS或者Flash，你应该知道画一只猫是很容易的，至少我是这么认为的。不过用CSS3画画真的是第一次接触，所以我愿意试一试。对我这样的新手真的很有帮助。至少我知道怎么画一个简单的人物形象，加上一些动画效果，我就活了，这就更好玩了！好了，开始之前，晒晒效果图：

PS:说实话，我觉得挺可爱的。小时候经常看很多A梦。突然觉得自己很善良很有童趣，瞬间就年轻了很多，哈哈！温暖的笑脸

首先，构建HTML结构：

div class='包装'！-整个丁当猫-哆啦a梦！-head-div class=' head '！-eyes-div class=' eyes ' div class=' eyeleft '！-眼球-div class=' black bleft '/div/div class=' eye right ' div class=' black bright '/div/div/div！-face-div class=' face '！-白脸-div class=' white'/div！鼻子！-鼻子高光-div class=' light'/div/div！-鼻子的垂直线-div class=' nose _ line'/div！大嘴！-bear-div class=' bear ' div class=' bear rtopr 160 '/div class=' bear r r middle '/div class=' bear r bottom 20 '/div class=' bear lTop r20 '/div class=' bear lmidle '/div class=' bear lBottom r160 '/div/div/div！-脖子和铃铛choker！-bell-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！-body-div class=' bodys '！腹部=身体/腹部！-中式胸衣-div class=' wrapps '/div！-pocket-div类=' pocket'/div！-盖住口袋的一半，使其看起来呈半圆形-div class=' pocket _ mask '/div/div！-右手-div class=' hand _ right '！-arm-div class=' arm'/div！-palm-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！-foot-div class=' foot ' div class=' left '/div class=' right '/div！-双脚之间的间隙-div class=' foot _ rewrite '/div/div/div/div。最好仔细研究一下丁当猫的整体结构，对以后自己画其他人物很有帮助，思路也会更清晰。

接下来，我们将通过头部、颈部、身体和脚部进行演示。首先将容器包装和丁当猫做成一些基本样式，将丁当猫的整个哆啦a梦设为相对，主要是为了方便定位子元素/后代。包装材料{ margin: 50px 0 0 500px} .哆啦a梦{ position:相对；}头部风格，因为猫的头部不是一个完美的圆形，在宽度和高度上有轻微的偏差，那么使用border-radius将头部从矩形改为椭圆形，然后使用radial gradient从右上角给背景一个放射性渐变，然后添加阴影使其更具立体感，背景：# 07bbee为了与旧浏览器兼容：哆啦a梦。头{ position:relative宽度： 320 px；height: 300pxborder-radius : 150像素；背景# 07bbeebackground :-web kit-radial-gradient(右上方，#fff 10%，#07bbee 20%，#10a6ce 75%，# 000)；background :-moz-radial-gradient(右上方，#fff 10%，#07bbee 20%，#10a6ce 75%，# 000)；background :-ms-radial-gradient(右上方，#fff 10%，#07bbee 20%，#10a6ce 75%，# 000)；border:2px固体# 555；box-shadow :-5px 10px 15px rgba(0，0，0，0.45)；}看看效果如何：

惊神马贵，好丑，别急，让它慢慢起死回生：

/*脸部*/.哆啦a梦。面{位置：相对；/*让所有脸部元素可自由定位*/z-index : 2；/*脸在头部背景上面*/} /*白色脸底*/.哆啦a梦。脸。白色{ width: 265px/*设置宽高*/高度： 195 px边界半径： 150像素；绝对位置：/*进行绝对定位*/top : 75px；左： 25px背景# fff/*此放射渐变也是使脸的左下角暗一些，看上去更真实*/background :-web套件-径向-渐变(右上方、#fff 75%、#eee 80%、#999 90%、# 444)；背景：-moz-径向梯度(右上方、#fff 75%、#eee 80%、#999 90%、# 444)；背景：毫秒-径向梯度(右上方、#fff 75%、#eee 80%、#999 90%、# 444)；} /*鼻子*/.哆啦a梦。脸。机头{宽度：30像素高度：30 px边界半径：15像素；背景技术# c93300border:2px固体# 000;位置：绝对；top:110pxleft:140pxz索引：3;/*鼻子在白色脸底下面*/} /*鼻子上的高光*/.哆啦a梦。脸。鼻子。轻{ width :10 px h8 :10 px border-radius : 5px；箱形阴影： 19px 8px 5px # fff/*通过阴影实现高光*/} /*鼻子下的线*/.哆啦a梦。脸鼻线{宽度：3px高度：100 px背景技术： # 333;位置：绝对；top:143pxleft:155pxz索引：3;} /*嘴巴*/.哆啦a梦。脸。口{宽度：220像素高度：400 px/*通过底边框加上圆角模拟微笑嘴巴*/border-bottom:3px实心# 333;边界半径：120像素；位置：绝对；top :-160 px；left:45px} /*眼睛*/.哆啦a梦。眼睛{位置：相对；z-index : 3；/*眼睛在白色脸底下面*/} /*眼睛共同的样式*/.哆啦a梦。眼睛眼睛{宽度：72像素8:82像素背景# fffborder:2px固体# 000;边界半径：35 px 35px位置：绝对；top:40px} /*眼珠*/.哆啦a梦。眼睛。眼睛。黑色{ width :14 px h8 :14 px背景技术： # 000;边界半径：7 px位置：绝对；top:40px}。哆啦a梦。眼睛。左{ left:82px}。哆啦a梦。眼睛。右{ left: 156px}。哆啦a梦。眼睛。眼睛bleft { left: 50px}。哆啦a梦。眼睛。眼睛明亮的{ left: 7px}写了这么多样式，结果是怎么样的呢：

生病怎么看都觉得别扭，哦！还差胡须须和白色脸底的边框呢，咱给补上：

/*胡须背景，主要用于挡住嘴巴的一部分，不要显得太长*/.哆啦a梦。晶须{宽度：220像素高度：80 px背景# fffborder-radius :15 px；位置：绝对；top:120pxleft:45pxz索引：2;/*在鼻子和眼睛下面*/} /*所有胡子的公用样式*/.哆啦a梦。络腮胡。晶须{ width: 60pxheight: 2px背景技术： # 333;绝对位置：z-index : 2；} /*右上胡子*/.哆啦a梦。络腮胡RTop { left : 165 xtop : 25px }/*右中胡子*/.哆啦a梦。络腮胡rmidle { left : 167 pxtop : 45px }/*右下胡子*/.哆啦a梦。络腮胡rbotom { left : 165 xtop : 65px }/*左上胡子*/.哆啦a梦。络腮胡lTop {左： 0；top: 25px} /*左中胡子*/.哆啦a梦。络腮胡lmidle { left :-2px；top: 45px} /*左下胡子*/.哆啦a梦。络腮胡lBottom { left : 0；top: 65px} /*胡子旋转角度*/.哆啦a梦。晶须。r160 { -webkit-transform:旋转(160度);-moz-变压器：旋转(160度);-ms-变压器：旋转(160度);表示“具有…性质的”型变压器： 旋转(160度);变压器： 旋转(160度);} .哆啦a梦。晶须。r20 { -webkit-transform:旋转(200度);-moz-变压器：旋转(200度);-ms-变压器：旋转(200度);表示“具有…性质的”型变压器：转(200度);变压器：转(200度);}

微笑这样就对了，看着多舒服啊！趁热打铁，做脖子和身体：

/*围脖*/.哆啦a梦choker { width : 230 pxh three : 20px背景技术# c40/*线性渐变让围巾看上去更自然*/background :-web套件-渐变（线性，左上，左下，从(#c40)到(# 800400));背景技术：-moz-线性梯度（中心顶部、#c40、# 800400)；背景：毫秒线性梯度（中心顶部、#c40、# 800400)；border: 2px固体# 000;边框半径： 10px相对位置：top :-40px；left : 45 pxz-index : 4；} /*铃铛*/.哆啦a梦。乔克。贝尔{ width: 40px高度： 40px_overflow:隐藏；/* IE6 hack */border : 2px solid # 000；边界半径： 50px背景技术# F9 F12 background :-web套件-渐变（线性，左上，左下，从(#f9f12a)，颜色停止(0.5，#e9e11a)，到(# a9a 100))；背景：-moz-线性-渐变(顶部，#f9f12a，#e9e11a 75%，# a9a 100)；背景：-ms-线性梯度（顶部、#f9f12a、#e9e11a 75%、# a9a 100)；盒影：-5px 5px 10px rgba(0，0，0，0.25)；绝对位置：top: 5pxleft: 90px} /*双横线*/.哆啦a梦。乔克bell _ line { width : 36px three : 2px背景技术# f9f12aborder: 2px固体# 333;边界半径： 3px 3px 0 0绝对位置：top: 10px} /*黑点*/.哆啦a梦。乔克bell _ circle { width :12 pxh8 :10 px背景技术： # 000;边界半径：5像素；位置：绝对；top:20pxleft:14px} /*黑点下的线*/.哆啦a梦。乔克贝尔_ under { width : 3px h8 :15 px背景技术： # 000;位置：绝对；left: 18pxtop:27px} /*铃铛高光*/.哆啦a梦。乔克bell _ light { width :12 px h8 :12 px border-radius :10 px；盒影：19 px 8px 5px # fff位置：绝对；top :-5px；left :5 poxopacity :0.7 }/*身子*/.哆啦a梦身体.的{位置：相对；top :-310 px；} /*肚子*/.哆啦a梦。身体。车身{宽度： 220像素高度： 165像素；背景技术# 07 beebabackground :-网络套件-渐变（线性、右上、左上，从(#07beea)、色停(0.5，#0073b3)、色停(0.75，#00b0e0)到(# 0096 be))；背景：-moz-线性梯度(右中，#07beea，#0073b3 50%，#00b0e0 75%，# 0096 be 100%)；背景：毫秒线性梯度(右中心，#07beea，#0073b3 50%，#00b0e0 75%，# 0096 be 100%)；border:2px实心# 333;位置：绝对；top:265pxleft:50px} /*白色肚兜*/.哆啦a梦。身体。包装{宽度： 170像素高度： 170像素；背景# fffbbackground :-网络套件-渐变（线性、右上、左下、从(#fff)、色停(0.75，#fff)、色停(0.83，#eee)、色停(0.90,#999)、色停(0.95,#444)到(# 000));背景：-moz-线性梯度(右上方、#fff、#fff 75%、#eee 83%、#999 90%、#444 95%、# 000)；背景：毫秒线性梯度(右上方、#fff、#fff 75%、#eee 83%、#999 90%、#444 95%、# 000)；border: 2px固体# 000;边框-半径： 85px绝对位置：left : 72 xtop : 230 px }/*口袋*/.哆啦a梦。身体。口袋{宽度： 130像素高度： 130像素；边界半径： 65px背景# fffbbackground :-网络套件-渐变（线性，右上，左下，从(#fff)，色停(0.70，#fff)，色停(0.75，#f8f8f8)，色停(0.80，#eee)，色停(0.88，#ddd)，到(# fff))；背景：-moz-线性梯度(右上方、#fff、#fff 70%、# f8f8 75%、#eee 80%、#ddd 88%、# fff)；背景：毫秒线性梯度(右上方、#fff、#fff 70%、# f8f8 75%、#eee 80%、#ddd 88%、# fff)；border: 2px固体# 000;位置：绝对；top: 250pxleft: 92px} /*挡住口袋一半*/.哆啦a梦。身体口袋口罩{宽度： 134px高度： 60px背景# fff边框-bottom: 2px实心# 000;位置：绝对；top: 259pxleft: 92px}好吧，脖子和身子都有啦！上图：

现在看起来有点像装饰，但笑容还是那么简单。好了，赶快做好你的手脚：

/

*左右手*/.哆啦a梦。右手。哆啦a梦左手{高： 100像素宽度： 100像素；绝对位置：top : 272 ppxleft : 248 px }/*左手*/.哆啦a梦hand _ left { left :-10px；} /*手臂公共部分*/.哆啦a梦。臂{宽度：80像素高度：50 px背景技术# 07 beebabackground :-网络套件-渐变（线性，左上，左下，从(#07beea)，颜色-停止(0.85，#07beea)，到(# 555));背景：-moz-线性梯度（中心顶部、#07BEEA、#07BEEA 85%、# 555)；背景：-ms-线性梯度（中心顶部、#07BEEA、#07BEEA 85%、# 555)；border: 1px固体# 000000;盒影：-10px 7px 10px rgba(0，0，0，0.35)；z指数：-1;相对位置：} /*右手手臂*/.哆啦a梦。右手arm { top : 17px-web kit-transform :旋转(35度);-moz-变压器：旋转(35 );-ms-变压器：旋转(35 );表示“具有…性质的”型变压器： 旋转(35 );变压器： 旋转(35 );} /*左手手臂*/.哆啦a梦。左手arm { top: 17px背景技术# 0096be/*背光一面使用纯色，使其有立体感*/box-shadow : 5px-7px 10px rgba(0，0，0，0.25)；-webkit-transform:旋转(145度);-moz-变压器：旋转(145度);-ms-变压器：旋转(145 );表示“具有…性质的”型变压器： 旋转(145 );变压器： 旋转(145 );} /*圆形手掌公共部分*/.哆啦a梦。圆形{ width: 60px高度： 60px边界半径： 30pxborder: 2px固体# 000;背景# fffbbackground :-网络套件-渐变（线性、右上、左下、从(#fff)、色停(0.5、#fff)、色停(0.70、#eee)、色停(0.8、#ddd)到(# 999));背景：-moz-线性梯度(右上方、#fff、#fff 50%、#eee 70%、#ddd 80%、# 999)；背景：毫秒线性梯度(右上方、#fff、#fff 50%、#eee 70%、#ddd 80%、# 999)；绝对位置：} /*右手手掌*/.哆啦a梦。右手。圆圈{ left: 40pxtop: 32px} /*左手手掌*/.哆啦a梦。左手。圆圈{左侧：-20px；top: 32px} /*手臂和身体结合处，使用背景遮住边框*/.哆啦a梦arm _ rewrite { height: 45px宽度： 5px背景技术# 07beea相对位置：} /*右手结合处*/.哆啦a梦。右手arm _ rewrite { top :-45px；left: 22px} /*左手结合处*/.哆啦a梦。左手arm _ rewrite { top :-45px；左侧： 60px背景技术# 0096be/*同理，背光一面使用纯色，使其有立体感*/} /*脚部*/.哆啦a梦。英尺{宽度： 280像素高度： 40px相对位置：top : 55 ppxleft : 20px }/*左右脚共同样式*/.哆啦a梦。脚。向左，向右。哆啦a梦。脚。右侧{宽度： 125像素重量： 30像素背景# fffbbackground :-网络套件-渐变（线性、右上、左下、从(#fff)、色停(0.75，#fff)、色停(0.85，#eee)到(# 999));背景：-moz-线性梯度(右上方、#fff、#fff 75%、#eee 85%、# 999)；背景：毫秒线性梯度(右上方、#fff、#fff 75%、#eee 85%、# 999)；border: 2px固体# 333;边界半径： 80px 60px 60px 40pxbox-shadow: -6px 0 10px rgba(0，0，0，0.35)；相对位置：} .哆啦a梦。脚。左{ left: 8pxtop: 65px}。哆啦a梦。脚。右{ top: 31pxleft: 141px} /*双脚之间的缝隙，加阴影使用立体感*/.哆啦a梦。脚foot _ rewrite { width : 20px x8 8: 10px背景# fffbbackground :-网络套件-渐变（线性，右上，左下，从(#666),色停(0.83，#fff)，到(# fff))；背景：-moz-线性梯度(右上方、#666、#fff 83%、# fff)；背景：毫秒线性梯度(右上方、#666、#fff 83%、# fff)；/*制作半圆效果*/边框： 2px实心# 000；边框-底部：无；边界半径： 40px 40px 0 0相对位置：top :-11px；left: 130px_ left: 127px}好了，最后完整结果：

让我们看看效果是否和开头一样。笑，虽然做得好，还是能让它动起来，比如眼睛。我们可以给它添加一个动画效果，让眼睛转动：

/*眼球*/. Dora emon . eyes . eye . black { width : 14px；height: 14px背景技术： # 000；border-radius : 7px；绝对位置：top: 40px-web kit-animate : eye move 3s线性无限；-moz-animation: eyemove 3s线性无限；-ms-animate : eye move 3s线性无限；-o-animate : eye move 3s线性无限；animation: eyemove 3s线性无限；}/*让眼睛动起来*/@-WebKit-关键帧眼睛动起来{ 70% {边距：0000；} 80% { margin :-22px 0 0；} 85% { margin :-22px 0 0 5px；} 90% { margin :-22px 10px 0 0；} 93% { margin :-22px 0 0；} 96% { margin 3360 0 0 0；} } @-moz-关键帧eye move { 70% { margin : 0 0 0；} 80% { margin :-22px 0 0；} 85% { margin :-22px 0 0 5px；} 90% { margin :-22px 10px 0 0；} 93% { margin :-22px 0 0；} 96% { margin 3360 0 0 0；} } @-o-关键帧eye move { 70% { margin : 0 0 0；} 80% { margin :-22px 0 0；} 85% { margin :-22px 0 0 5px；} 90% { margin :-22px 10px 0 0；} 93% { margin :-22px 0 0；} 96% { margin 3360 0 0 0；} } @关键帧eye move { 70% { margin : 0 0 0；} 80% { margin :-22px 0 0；} 85% { margin :-22px 0 0 5px；} 90% { margin :-22px 10px 0 0；} 93% { margin :-22px 0 0；} 96% { margin 3360 0 0 0；}}好的，这样你的眼睛会动。有兴趣可以试试，但不能在这里展示。但是如果你有更好的动画效果可以尝试，那么这个案例就结束了。

PS:虽然这只是一个案例，但确实帮助我开阔了思路。事实上，要达到这样的效果可能需要很多时间。至少对我来说，目前确实是这样。主要难点在于版面定位和色彩的合理搭配，这样才能让形象更加生动传神！可能有些人对PS或Flash等图形处理软件不熟悉，对用CSS3绘制一些文字或其他效果毫无头绪，可以去一些网站参考设计师的设计构图、图形分解等相关设计知识，帮助我们更好地理解。

以上就是本文的全部内容。希望大家都能喜欢并练习。