搜索
您的当前位置:首页正文

纯CSS3画出叮当猫_html/css

2023-11-28 来源:软文情感网

刚学习了这个案例,然后觉得比较好玩,就练习了一下。然后发现其实也不难,如果你经常使用PS或者Flash的话,应该就会知道画个叮当猫是很容易的事,至少我是这么觉得。但是,用CSS3画出来确实是第一次接触,所以很乐意去尝试一下,对于我这种菜鸟,确实是帮助不少,至少懂得如何去画一个简单的人物形象出来,再加上一些动画效果,就活了,那就更好玩了!OK,开始之前,先把效果图晒一下:

最终效果图

PS:说实话,我觉得挺可爱的,小时候经常看多啦A梦,突然感觉很亲切,很童真,瞬间年轻了好多,哈哈!

首先,先把HTML结构搭建好:

 

最好先把叮当猫的整体结构仔细研究一下,这对以后想要自己动手画别的人物形象很有帮助,思路会比较明朗。

接下来,我们按照头部,脖子,身体,脚部分别进行演示。首先将容器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);}

看看效果到底怎么样:

什么鬼 ,这么丑,别急,慢慢让它活过来:

/*脸部*/ .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,这样,眼睛就会动了,有兴趣的可以试一下,这里就无法展示了。但是如果你有什么更好的动画效果也可以尝试,那么这个案例就结束了。

小编还为您整理了以下内容,可能对您也有帮助:

叮当猫简笔画步骤

1. 叮当猫简笔画
叮当猫简笔画 怎么画机器猫?
1.首先要准备好纸一张,铅笔一根,橡皮也是必要的。同时为了达到更好的效果,也可以准备其他物品,如茶杯的盖子等等。

2、先画一个圆,要尽量的圆。不能太扁或者纯粹画成了椭圆。如果画不圆,就可以借助茶杯盖子了。完了之后,修改一下圆的下半部分,稍微的收一下。这是多啦A梦的面盆脸。

3.在大脸中上部画两个椭圆,差不多就行,这是多啦A梦的两双带夜视功能的红外线眼睛。然后,顺着眼睛左侧和右侧三分之一位置,分别顺着脸引出两条线,到脸的下半部分。

4.画出笑眯眯的眼睛,眼睛下面画一个圆,是多啦A梦超级灵敏的鼻子,下面的画一根竖线,大概是类似人的“人中”吧。没什么难度。

5.接下来画多啦A梦的大嘴和舌头。很简单,主要的位置要找对。

6.画身子,有一点点难度。首先在左右脸的两侧画两条竖线,长度要适度,因为多啦A梦是个小矮子。之后,在两条线四分之一位置画两条短线,注意角度和方向,和头下部两个角的画出的两条线组成胳膊,胳膊下部画两个圆,是没有手指头的吸盘手。

在链接最开始画的两条竖线,组成身子,中间画上圆和肚兜。(有点复杂,解释的不大清楚。方法很多种,只要找好比例就行了。)

7.加工一下,画上脖子的项圈和铃铛。画上扁平足和尾巴。

完成了。

选我吧!!!
怎么画机器猫?
哆啦A梦是个科学发明家,可以把人们敢想却做不到的事利用各种各样的道具变成现实,说可以是将孩子们的想象力发挥到极致,并将其梦想一一实现的人物。如果他的主人不是大雄,那么在他的帮助下,主人一定会成为很了不起的人,可也正因他的主人是大雄,所以即使他拿出的神奇道具再如何强大,也会被大雄给整成乌龙。所以说,哆啦A梦很强,只是他的强完全被大雄的乌龙给抹杀了。

叮当猫是只会施法术的狸猫,就法术这一点,哆啦A梦自然是不会,但他变出的法术经常自己出现乌龙,是个迷迷糊糊的小野猫角色。不过叮当猫很可爱,和哆啦A梦无奈地去帮助大雄解决困难不一样,叮当猫都是很主动地想去帮助美琪,只是经常好心办坏事,做出一些可笑荒唐的行为来。

这样比较,哆啦A梦是科学派,而叮当猫是魔幻派的,拿出来作为比较,出来都是“猫”以外,实在是欠缺共同点,所以他们谁更厉害,就是见仁见智了,渴望哆啦A梦道具的人,肯定会觉得他强,而憧憬叮当法术的人,就会觉得他强吧。
怎样画哆啦a梦,简笔画
1、首先画一个圆,把握不好者可以用圆规。

2、然后画出项圈和铃铛,注意铃铛的位置。 3、画上眼睛,注意眼睛的位置和大小 4、之后画两个相对的圆弧在两侧,把握不好者可以画中线 5、在眼睛下方画一个圆鼻子,然后画一个竖,底下画嘴巴,左右两边各三根胡须,对称。

6、接下来画身体,稍微注意弧度和中间凹进去的角度 7、在里面画圆,画口袋,这里注意位置和大小 8、画手,注意别画太大太长,注意衔接;脚的部分也要注意把握。 9、给手画上圆圈,再上色就可以啦。

(注意鼻子和铃铛的颜色) 扩展资料 简笔画是通过目识、心记、手写等活动,提取客观形象最典型、最突出的主要特点,以平面化、程式化的形式和简洁洗练的笔法,表现出既有概括性又有可识性和示意性的绘画。 简笔画,是指把复杂的形象简单化,形体结构是绘画最基本的要素,各种物体都有自己独特的构成因素,结构形势及比例关系,平面化的简笔画,表现2维的平面结构比较简便。

但要表现立体结构的物体形象,因主要只表现一个面的图形,写生时应选择能充分显示对象结构特点的角度和视向,使这些特点能突出地呈献于平面图形之中。 参考资料:百度百科-简笔画。
哆啦a梦怎么画步骤图
解决方法: 一,首先画一个大圆作为脑袋,下面不需封口。

二,然后画铃铛和项圈。 三,眼睛。

四,脸部轮廓。 五,画胡子和嘴巴。

六。画身子。

七,画藏宝贝的口袋。 八,画胳膊、手、脚,哆唻A梦完成。

叮当猫简笔画步骤

1. 叮当猫简笔画
叮当猫简笔画 怎么画机器猫?
1.首先要准备好纸一张,铅笔一根,橡皮也是必要的。同时为了达到更好的效果,也可以准备其他物品,如茶杯的盖子等等。

2、先画一个圆,要尽量的圆。不能太扁或者纯粹画成了椭圆。如果画不圆,就可以借助茶杯盖子了。完了之后,修改一下圆的下半部分,稍微的收一下。这是多啦A梦的面盆脸。

3.在大脸中上部画两个椭圆,差不多就行,这是多啦A梦的两双带夜视功能的红外线眼睛。然后,顺着眼睛左侧和右侧三分之一位置,分别顺着脸引出两条线,到脸的下半部分。

4.画出笑眯眯的眼睛,眼睛下面画一个圆,是多啦A梦超级灵敏的鼻子,下面的画一根竖线,大概是类似人的“人中”吧。没什么难度。

5.接下来画多啦A梦的大嘴和舌头。很简单,主要的位置要找对。

6.画身子,有一点点难度。首先在左右脸的两侧画两条竖线,长度要适度,因为多啦A梦是个小矮子。之后,在两条线四分之一位置画两条短线,注意角度和方向,和头下部两个角的画出的两条线组成胳膊,胳膊下部画两个圆,是没有手指头的吸盘手。

在链接最开始画的两条竖线,组成身子,中间画上圆和肚兜。(有点复杂,解释的不大清楚。方法很多种,只要找好比例就行了。)

7.加工一下,画上脖子的项圈和铃铛。画上扁平足和尾巴。

完成了。

选我吧!!!
怎么画机器猫?
哆啦A梦是个科学发明家,可以把人们敢想却做不到的事利用各种各样的道具变成现实,说可以是将孩子们的想象力发挥到极致,并将其梦想一一实现的人物。如果他的主人不是大雄,那么在他的帮助下,主人一定会成为很了不起的人,可也正因他的主人是大雄,所以即使他拿出的神奇道具再如何强大,也会被大雄给整成乌龙。所以说,哆啦A梦很强,只是他的强完全被大雄的乌龙给抹杀了。

叮当猫是只会施法术的狸猫,就法术这一点,哆啦A梦自然是不会,但他变出的法术经常自己出现乌龙,是个迷迷糊糊的小野猫角色。不过叮当猫很可爱,和哆啦A梦无奈地去帮助大雄解决困难不一样,叮当猫都是很主动地想去帮助美琪,只是经常好心办坏事,做出一些可笑荒唐的行为来。

这样比较,哆啦A梦是科学派,而叮当猫是魔幻派的,拿出来作为比较,出来都是“猫”以外,实在是欠缺共同点,所以他们谁更厉害,就是见仁见智了,渴望哆啦A梦道具的人,肯定会觉得他强,而憧憬叮当法术的人,就会觉得他强吧。
怎样画哆啦a梦,简笔画
1、首先画一个圆,把握不好者可以用圆规。

2、然后画出项圈和铃铛,注意铃铛的位置。 3、画上眼睛,注意眼睛的位置和大小 4、之后画两个相对的圆弧在两侧,把握不好者可以画中线 5、在眼睛下方画一个圆鼻子,然后画一个竖,底下画嘴巴,左右两边各三根胡须,对称。

6、接下来画身体,稍微注意弧度和中间凹进去的角度 7、在里面画圆,画口袋,这里注意位置和大小 8、画手,注意别画太大太长,注意衔接;脚的部分也要注意把握。 9、给手画上圆圈,再上色就可以啦。

(注意鼻子和铃铛的颜色) 扩展资料 简笔画是通过目识、心记、手写等活动,提取客观形象最典型、最突出的主要特点,以平面化、程式化的形式和简洁洗练的笔法,表现出既有概括性又有可识性和示意性的绘画。 简笔画,是指把复杂的形象简单化,形体结构是绘画最基本的要素,各种物体都有自己独特的构成因素,结构形势及比例关系,平面化的简笔画,表现2维的平面结构比较简便。

但要表现立体结构的物体形象,因主要只表现一个面的图形,写生时应选择能充分显示对象结构特点的角度和视向,使这些特点能突出地呈献于平面图形之中。 参考资料:百度百科-简笔画。
哆啦a梦怎么画步骤图
解决方法: 一,首先画一个大圆作为脑袋,下面不需封口。

二,然后画铃铛和项圈。 三,眼睛。

四,脸部轮廓。 五,画胡子和嘴巴。

六。画身子。

七,画藏宝贝的口袋。 八,画胳膊、手、脚,哆唻A梦完成。

怎么画卡通哆啦A梦(机器猫、蓝胖子、叮当猫)

01

首先我么将多啦A梦的脑袋画出来,需要注意脑袋不是纯圆形的,如图所示。

02

之后我们画出多啦A梦的眼睛和鼻子轮廓,注意有重叠的部分,画的时候可以分别去画,将多余的部分擦除即可,如图所示。

03

之后我们画出多啦A梦的眼珠子,我们一定要仔细的去画,因为将眼睛的神态画好了,整幅画就会非常的棒,如图所示。

04

之后画出多啦A梦的脸部轮廓,如图所示。

05

之后我们画出多啦A梦的嘴巴,因为多啦A梦是猫,所以以画出三瓣嘴,用线条画出即可,如图所示。

06

之后画出多啦A梦的胡须,不用太多,两边各三根即可,如图所示。

07

之后画出多啦A梦的小手,并将多余的线条擦除,如图所示。

08

之后我们画出多啦A梦的身体,是拍在地上的样子,如图所示。

09

之后我们将多啦A梦的小腿画出来,如图所示。

10

之后我们在多啦A梦身体后面画出小尾巴,先画出一个小圆,之后用直线和身体连接即可,如图所示。

11

最后我们在脑袋底下画出多啦A梦的铃铛,简单的画出来即可,如图所示。大家按照我的方法,即可画出卡通哆啦A梦(机器猫、蓝胖子、叮当猫)。

软文情感网还为您提供以下相关内容希望对您有帮助:

卡通哆啦插画-怎么画卡通哆啦A梦(机器猫、蓝胖子、叮当猫)

1、首先画出哆啦A梦的头,她的头是很圆的,可以用一些辅助工具来画;2、接着画哆啦A梦的标志——它的铃铛;3、然后来画哆啦A梦的眼睛,两只眼睛要挨在一起哦;4、接着把哆啦A梦的面部画出来;5、然后把哆啦A梦的无...

怎么画卡通哆啦A梦(机器猫、蓝胖子、叮当猫)

01 首先我么将多啦A梦的脑袋画出来,需要注意脑袋不是纯圆形的,如图所示。02 之后我们画出多啦A梦的眼睛和鼻子轮廓,注意有重叠的部分,画的时候可以分别去画,将多余的部分擦除即可,如图所示。03 之后我们画...

叮当猫简笔画步骤

3.在大脸中上部画两个椭圆,差不多就行,这是多啦A梦的两双带夜视功能的红外线眼睛。然后,顺着眼睛左侧和右侧三分之一位置,分别顺着脸引出两条线,到脸的下半部分。4.画出笑眯眯的眼睛,眼睛下面画一个圆,是多啦A...

Html、css和Html5、Css3的区别?

HTML(HyperTextMarkupLanguage)是超文本标记语言的缩写HTML使用标记语言描述Web页面的结构HTML元素是HTML页面的构建块HTML元素通过标签tag表示HTML标签是“标题”、“段落”,“表格”等内容的一部分。浏览器不显示HTML标签,但是...

html5 和css3 怎样使用

页面内容存放在HTML文档中,而用于定义表现形式的CSS规则则存放在另一个文件中或HTML文档的某一部分,通常为文件头部分。CSS3也是当前最新版本,主要特点是支持圆角、阴影、动画效果等。值得一提的是,目前IE6、7、8不能完整...

html css是什么?

网页现在的新标准是W3C。目前的模式是html css javascript,如何理解呢,就是html是网页的结构,CSS是网页的样式,javascript是行为。结构就是盖房子先要把结构建出来,然后用CSS来装饰。其实你在用dreamweaver做网页时就已经用...

跪求高清 HTML5+CSS3网页设计基础教程,有人分享教材的百度网盘吗?我需...

https://pan.baidu.com/s/1JJsUG4UJ7a9aQcm812XwRg 提取码:1234 2018年清华大学出版社出版的图书 《HTML5+CSS3网页设计基础教程》是2018年1月清华大学出版社出版的图书,作者是石磊、王维哲、李娜、谢昆鹏、王鹏程。

什么是HTML5和CSS3

CSS3是CSS技术的升级版本,CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂,所以,把它分解为一些小的模块,更多新的模块也被加入进来。这些模块包括: 盒子模型、列表模块、超链接方式 、...

《HTML5与CSS3基础教程(第8版)》epub下载在线阅读,求百度网盘云资源_百 ...

资源链接:https://pan.baidu.com/s/1wgc37UtKCHruM7xZWRrXng 密码:dew2 书名:HTML5与CSS3基础教程(第8版)作者:[美] Elizabeth Castro 译者:望以文 豆瓣评分:8.3 出版社:人民邮电出版社 出版年份:2014-5 ...

我需要 HTML5+CSS3+JavaScript项目开发,急急!求这个百度网盘资源!阿里嘎...

https://pan.baidu.com/s/1t8H7QOHU1Ic_KiQkywrqfA 提取码:1234 本书内容系统全面,在技术上引入了HTML和CSS最新版本内容,详细介绍了HTML5和CSS3的各项新功能、新特性。所有知识点都紧跟HTML5与CSS3的最新发展动态,...

本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。

热门图文

  • 读《杜工部集》二首的全文 读《杜工部集》二首的全文是什么

    《读《杜工部集》二首》贯休全文:造化拾无遗,唯应杜甫诗。岂非玄域橐,夺得古人旗。日月精华薄,山川气概卑。古今吟不尽,惆怅不同时。甫也道亦丧,孤身出蜀城。彩毫终不撅,白雪更能轻。命薄相如命,名齐李白名。不知耒阳令,何以葬先生。

  • 读《杜工部集》二首的全文是什么

    《读《杜工部集》二首》贯休全文:造化拾无遗,唯应杜甫诗。岂非玄域橐,夺得古人旗。日月精华薄,山川气概卑。古今吟不尽,惆怅不同时。甫也道亦丧,孤身出蜀城。彩毫终不撅,白雪更能轻。命薄相如命,名齐李白名。不知耒阳令,何以葬先生。

  • 读《杜工部集》二首的全文

    《读《杜工部集》二首》贯休全文:造化拾无遗,唯应杜甫诗。岂非玄域橐,夺得古人旗。日月精华薄,山川气概卑。古今吟不尽,惆怅不同时。甫也道亦丧,孤身出蜀城。彩毫终不撅,白雪更能轻。命薄相如命,名齐李白名。不知耒阳令,何以葬先生。

  • 读《杜工部集》二首全文

    《读《杜工部集》二首》贯休全文:造化拾无遗,唯应杜甫诗。岂非玄域橐,夺得古人旗。日月精华薄,山川气概卑。古今吟不尽,惆怅不同时。甫也道亦丧,孤身出蜀城。彩毫终不撅,白雪更能轻。命薄相如命,名齐李白名。不知耒阳令,何以葬先生。

  • 读《杜工部集》二首的朝代是什么

    《读《杜工部集》二首》贯休朝代:唐代

Top