首页 / HTML / html打造动漫人物--哆啦A梦

html打造动漫人物--哆啦A梦

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了html打造动漫人物--哆啦A梦，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含9589字，纯文字阅读大概需要14分钟。

内容图文

我相信每个人的童年都有一个哆啦a梦，一个小小的肚皮里装满了不可思议的哆啦a梦，一个在你无助伤心的时候陪在你身边的哆啦a梦，一个陪你胡思乱想陪你吃铜锣烧的哆啦a梦~今天我们就来画一个我们心中的哆啦a梦吧~

html打造动漫人物--哆啦A梦 - 文章图片

定义哆啦a梦的容器

千篇一律先定义一个画哆啦a梦的大容器，确定它的大小和位置。

<!-- 哆啦A梦大容器 --><p class="doa"></p>
/*哆啦A梦*/
  .doa{position: relative;top: 100px;}

画哆啦a梦的头部（包括脸，脸部包括眼睛和鼻子）

头部包含好几块部分：哆啦a梦的脸部和鼻子，脸部又包括两只眼睛，两只眼睛里面还有眼珠和眼白部分，所以会有好几层的dom嵌套，当然基本图形都是由p+border-radius拼凑而成。
将画好的各个部位品拼凑到相应的位置上即可。

看我前面画的几个图画就知道border-radius是一个非常常用的属性，几乎p的每一次变形都离不开它，其实border-radius的真面目应该是border-radius: 300px 300px 300px 300px/300px 300px 300px 300px;酱紫的，我们一般不写斜杠后面的内容，斜杠切面是水平长度，斜杠后面是垂直高度，前杠后面默认不写就是水平和垂直大小是一样的。我知道我这样说不够详细，可以参考我鑫神的博客秋月何时了，CSS3 border-radius知多少？，保证你分分钟在老司机的带领下彻底弄懂border-radius，还不快上车？

<!-- 头 -->    
  <p class="head">
  <!-- 存放脸部的容器 -->
      <p class="face">
      <!-- 左眼大圈儿 -->
          <p>
          <!-- 左眼眼珠（黑色部分） -->
              <p>
              <!-- 左眼眼白，黑色里面的白色部分 -->
                  <p></p>
              </p>
          </p>
      <!-- 右眼大圈儿 -->
          <p>
          <!--右眼眼珠（黑色部分） -->
              <p>
              <!-- 右眼眼白，黑色里面的白色部分 -->
                  <p></p>
              </p>
          </p>
      </p>
      <!-- 红鼻子部分 -->
      <p class="nose">
      <!-- 红鼻子里面的白圈儿 -->
          <p></p>
      </p>
      <!-- 红鼻子下面的那根黑线，也属于鼻子部分  -->
      <p class="nose1"></p>
  </p>
.head{      margin: 0 auto;   /*头部定义大小并居中显示*/      width: 400px;      height: 350px;      background: #008ee3;  /*头部定义背景颜色*/      position: relative;      border-radius: 50% 50% 25% 25% / 55% 55% 45% 45%;  /*头部定义四个方向圆角大小*/
  }
  .face{      width: 310px;   /*脸部定义大小*/      height: 260px;      background: snow;   /*脸部定义背景颜色*/      border-radius: 50% 50% 25% 25% / 55% 55% 45% 45%;  /*脸部定义四个方向的圆角大小*/      position: relative;    /*脸部定义位置，是相对于head的位置*/      top: 90px; 
      left: 45px;
  }  /*左眼眶*/
  .face>p:first-child{      width: 80px;    /*左眼框定义大小*/      height: 100px;      border-radius: 50%;   /*左眼框定义与圆角大小*/      border:2px #000 solid;     /*定义外边框*/      background: snow;      float: left;   /*为了使左右两个眼睛能在一排显示*/      position: relative;   /*位置是相对于face的位置*/      top:-40px;      left: 71px;      z-index: 50;
  }  /*右眼眶，画法跟左眼一样*/
  .face>p:last-child{      width: 80px;      height: 100px;      border-radius: 50%;      border:2px #000 solid;      background: snow;      float: left;      position: relative;      top:-40px;      left: 71px;      z-index: 50;
  }  /*左眼珠1*/
  .face>p:first-child p{      width: 20px;     /*定义眼珠的大小*/      height: 25px;      background: #000;      border-radius: 50%;      position: absolute;  /*定义眼珠的位置，相对于眼眶的位置*/      top: 45px;      left: 60px;
  }  /*左瞳孔*/
  .face>p:first-child p p{      width: 10px;     /*定义黑色瞳孔的大小*/      height: 10px;      background: #ffffff;      border-radius: 50%;      position: absolute;  /*定义黑色瞳孔的位置，相对于眼珠的位置*/      top: 7px;      left: 10px;
  }  /*右眼珠和左眼珠画法一样*/
  .face>p:last-child p{      width: 20px;      height: 25px;      background: #000;      border-radius: 50%;      position: absolute;      top: 45px;
  }  /*右瞳孔和左瞳孔的画法一样*/
  .face>p:last-child p p{      width: 10px;      height: 10px;      background: #ffffff;      border-radius: 50%;      position: absolute;      top: 7px;
  }
  .nose{      width: 30px;      /*定义红鼻子的大小*/      height: 30px;      border-radius: 50%;      background: #c70000;      position: absolute;      top: 130px;      left: 50%;      margin-left: -15px;      z-index: 10;
  }  .nose p{      width: 10px;     /*定义红鼻子里面白色圈圈的大小*/      height: 10px;      border-radius: 50%;      position: absolute;      background: #ffffff;      top: 10px;      margin-left: 20px;      z-index: 10;
  }
  .nose1{  
      width: 2px;      /*定义红鼻子下面的那一条黑线*/      height: 130px;      background: #000;      position: absolute;      top: 160px;      left: 50%;      margin-left: -1px;      z-index: 10;
  }

哆啦a梦的头部.png

画哆啦a梦的嘴巴部分

嘴巴应该是很简单的了吧，看一眼就知道是是用边框+border-radius实现的。

<p class="mouth"></p>
.mouth{      width: 250px;   /*定义嘴巴的大小*/      height: 200px;      border-radius: 50%;      background: snow;      border-bottom: 2px #000 solid;      margin: -230px auto;      position: relative;  /*定义嘴巴的位置*/
  }

html打造动漫人物--哆啦A梦 - 文章图片

哆啦a梦的嘴巴.png

画哆啦a梦的胡须部分

胡须部分其实在上一篇文章画html打造动画【连载3】- 小猫笑脸动画里面画胡须的时候就已经介绍了画胡须的方法，在这里就不赘述了，基本思路都是一样的。

<!-- 胡须 -->
  <p class="beard">
  <!-- 左边胡须部分 -->
      <p class="left">
      <!-- 第一根胡须 -->
          <p></p>
          <!-- 第二根胡须 -->
          <p></p>
          <!-- 第三根胡须 -->
          <p></p>
      </p>
      <p class="right">
          <p></p>
          <p></p>
          <p></p>
      </p>
      <!-- 脖子部分的小白条部分 -->
      <span></span>
  </p>/*胡须样式*/.beard .left p:first-child{      width: 120px;      height: 40px;      border-top: 2px #000 solid;      border-radius: 10% 90% 10% 90% / 10% 90% 10% 90%;      position: absolute;      left: 50%;      top: 140px;      margin-left: -170px;      z-index: 100;
  }  .beard .left p:nth-child(2){      width: 120px;      height: 40px;      border-top: 2px #000 solid;      border-radius: 10% 90% 10% 90% / 30% 70% 40% 60%;      position: absolute;      left: 50%;      top: 170px;      margin-left: -170px;      z-index: 100;
  }  .beard .left p:last-child{      width: 120px;      height: 40px;      border-top: 2px #000 solid;      border-radius: 10% 90% 10% 90% / 40% 60% 10% 90%;      position: absolute;      left: 50%;      top: 200px;      margin-left: -170px;      z-index: 100;
  }  .beard .right p:first-child{      width: 120px;      height: 40px;      border-top: 2px #000 solid;      border-radius: 90% 10% 90% 10% / 90% 10% 90% 10%;      position: absolute;      left: 50%;      top: 140px;      margin-left: 50px;      z-index: 100;
  }  .beard .right p:nth-child(2){      width: 120px;      height: 40px;      border-top: 2px #000 solid;      border-radius: 90% 10% 90% 10% / 70% 30% 60% 40%;      position: absolute;      left: 50%;      top: 170px;      margin-left: 50px;      z-index: 100;
  }  .beard .right p:last-child{      width: 120px;      height: 40px;      border-top: 2px #000 solid;      border-radius: 90% 10% 90% 10% / 60% 40% 90% 10%;      position: absolute;      left: 50%;      top: 200px;      margin-left: 50px;      z-index: 100;
  }  .beard span{      display: block;      width: 60px;      height: 3.5px;      background: #ffffff;      border-radius: 4px;      position: absolute;      top: 352px;      left: 50%;      margin-left: -105px;
  }

html打造动漫人物--哆啦A梦 - 文章图片

哆啦a梦的胡须.png

画哆啦a梦的脖子部分(脖子部分包括铃铛)

脖子就是基本p变形之后的图形，多余的部分隐藏到头部下面就可以了。

铃铛部分是各个很简单的基本图形组成。

<!-- 脖 -->
  <p class="neck">
  <!-- 铃铛的圆形 -->
      <p></p>
      <!-- 铃铛的小圆角矩形 -->
      <p></p>
      <!-- 铃铛的小圆形 -->
      <p></p>
      <!-- 铃铛的小竖线 -->
      <p></p>
  </p>
.neck{      width: 330px;      height: 200px;      border-radius: 50% 50% 20% 20% / 50% 50% 50% 50%;      background: #e30000;      margin: 80px auto;      z-index: 100;
  }  .neck p:first-child{      border: 2px #000 solid;      border-radius: 50%;      width: 40px;      height: 40px;      background: #ffdd2e;      position: absolute;      top: 350px;      left: 50%;      margin-left: -22px;      transition: all 1s;
  }  .neck p:nth-child(2){      border: 2px #000 solid;      width: 44px;      height: 5px;      background: #ffdd2e;      position: absolute;      left: 50%;      margin-left: -24px;      top: 363px;      border-radius: 5px;      transition: all 1s;
  }  .neck p:nth-child(3){      width: 8px;      height: 8px;      border: 2px #000 solid;      position: absolute;      background: #6c5844;      border-radius: 50%;      left: 50%;      margin-left: -6px;      top: 375px;      transition: all 1s;
  }  .neck p:nth-child(4){      width: 2px;      height: 8px;      background: #000;      position: absolute;      left: 50%;      margin-left: -1px;      top: 385px;      transition: all 1s;
  }

html打造动漫人物--哆啦A梦 - 文章图片

哆啦a梦的脖子.png

完成哆啦a梦的动态效果

动起来的哆啦a梦才比较萌对吧，那我们就让它动起来吧（transition属性）。
鼠标移动到眼睛部位左眼珠移动到左边。
鼠标移动到嘴巴部位，脸部表情变化。

鼠标移动到铃铛部分，铃铛变大。

/*眼睛动效*/.head:hover .face>p:first-child p{      left: 0px;      transition: all 1s;
  }  .head:hover .face>p:first-child p p{      left: 0px;      transition: all 1s;
  }/*嘴巴动效，嘴巴的dom容器下面要加了个空的p容器*/.mouth p:first-child{      width: 82px;      height: 2px;      background: #000;      position: absolute;      z-index: 1000;      top: -25px;      left: 6px;      display: none;
  }  .mouth p:nth-child(2){      width: 82px;      height: 2px;      background: #000;      position: absolute;      z-index: 1000;      top: -25px;      left: 90px;      display: none;
  }  .mouth:hover{      border-radius: 0;      width: 180px;      height: 200px;
  }  .mouth:hover p:first-child,.mouth:hover p:nth-child(2){      display: block;
  }/*铃铛动效*/.neck:hover p:first-child{      width: 60px;      height: 60px;      left: 50%;      margin-left: -30px;
  }  .neck:hover p:nth-child(2){      width: 66px;      height: 7.5px;      left: 50%;      margin-left: -33px;
  }  .neck:hover p:nth-child(3){      width: 12px;      height: 12px;      left: 50%;      margin-left: -6px;      top: 385px;
  }  .neck:hover p:nth-child(4){      width: 2px;      height: 12px;      left: 50%;      margin-left: 1px;      top: 400px;
  }

html打造动漫人物--哆啦A梦 - 文章图片

哆啦a梦动图.gif

以上就是html打造动漫人物--哆啦A梦的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的html打造动漫人物--哆啦A梦全部内容，希望文章能够帮你解决html打造动漫人物--哆啦A梦所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/413510.html

来源：【匿名】

【上一篇】htmlCSS中的相对定位和绝对定位使用总结【下一篇】PHP 和 HTML

更多 ►

【html打造动漫人物--哆啦A梦】教程文章相关的互联网学习教程文章

AJAX基础（三）——DOM基础及DOM操纵HTML【代码】

DOM的概念 DOM= Document Object Model，文档对象模型，DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说，这是表示和处理一个HTML或XML文档的常用方法。有一点 DOM很重要，DOM的设计是以对象管理组织（OMG）的规约为基础的，因此可以用于任何编程语言。最初人们把它认为是一种让JavaScript在浏览器间可移植的方法，不过DOM的应用已经远远超出这个范围。Dom技术使得用户页面可以动态地变化，如可...

MVC中使用HTML Helper类扩展HTML控件【代码】【图】

文章摘自：http://www.cnblogs.com/zhangziqiu/archive/2009/03/18/1415005.htmlMVC在view页面，经常需要用到很多封装好的HTML控件，这篇文章主要讲述，怎么自己扩展和定制自己需要的控件。----------------------------------------------------------HTML Helper类是ASP.NET MVC框架中提供的生成HTML控件代码的类. 本质上与第一种方式一样, 只是我们可以不必手工书写HTML代码,而是借助HTML Helper类中的方法帮助我们生成HTML控件...

HTML5基础

1.HTML是什么?HTML是用来描述网页的一种语言,它是一种超文本标记语言,也就是说,HTML不是一种编程语言,仅是一种标记语言.2.HTML特点简易性：超级文本标记语言版本升级采用超级方式，从而更加灵活方便。可拓展性：超级文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超级文本标记语言采取子类元素的方式，为系统扩展带来保证。平台无关性：虽然PC大行其道，但使用MAC等其他机器的大有人在，超级文本标记语言可以使用在广泛...

网页开发学习笔记五: HTML行内块级元素【代码】

标签分类块级元素div h1~h6 p ul li特点独占一行可以设置宽度嵌套(包含)下, 子块元素的宽度(没有定义的情况下)与父块元素宽度默认一致<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">div{height: 200px;background-color: orange;}p{height: 300px;background-color: green;}.box{width: 100px;}.box p{width: 300px;height: 100px;background-color: pink;}</style></head><b...

HTML中button标签点击实现页面跳转【代码】

方法1：使用onclick事件<input type="button" value="按钮" onclick="javascrtpt:window.location.href=‘http://www.baidu.com/‘" />或者直接使用button标签<button onclick="window.location.href = ‘https://www.baidu.com/‘">百度</button> 方法2：在button标签外套一个a标签<a href="http://www.baidu.com/"><button>百度</button> </a>或使用<a href="http://www.baidu.com/"><input type="button" value=‘百度‘></a> ...

html5shiv.js让吃屎的IE6、IE7、IE8支持html5去吧【代码】

插件介绍用于解决IE9以下版本浏览器对HTML5新增标签不识别，并导致CSS不起作用的问题。所以我们在使用过程中，想要让低版本的浏览器，即IE9以下的浏览器支持，那么这款html5shiv.js是一个非常好的选择！上面这段代码仅会在IE浏览器下运行，还有一点需要注意，在页面中调用Html5.js文件必须添加在页面的head元素内，因为IE浏览器必须在元素解析前知道这个元素，所以这个js文件不能在页面底部调用。使用方法<!--[if lt IE 9]> <scr...

HTML表格标签【代码】

<table>表格标签　　常用属性：　　border指定边框　　width宽　　height高，内容多不用指定，自动适应　　bgcolor背景颜色　　align对齐方式，控制表格　　background背景图片<caption>表格标题<th>表头单元格<tr>行　常用属性：　　bgcolor背景颜色　　align对齐方式，控制内容　　background背景图片<td>列table>tr>td【此时按下Tab（制表键），输入内容中间和后面都不能留有空格和换行等内容】表格合并　　colspan跨列　　...

HTML 特殊字符彻底剖析

HTML彻底剖析(14)特殊字符 ■ 常用特殊字符只要你认识了 HTML 标记，你便会知道特殊字符的用处。 HTML 原代码显示结果描述<<小于号或显示标记>>大于号或显示标记&&可用于显示其它特殊字符""引号®?已注册©?版权™?商标&ensp; 半个空白位&emsp; 一个空白位不断行的空白ISO Latin-1 特殊字符 HTML 原代码显示结果描述Æ?Uppercase AE diphthingÁáUppercase A, acute accentÂ?Uppercase A, cir...

HTML5安全风险之Web Storage攻击详解

一、WebStorage简介HTML5支持WebStorage，开发者可以为应用创建本地存储，存储一些有用的信息。例如LocalStorage可以长期存储，而且存放空间很大，一般是5M，极大的解决了之前只能用Cookie来存储数据的容量小、存取不便、容易被清除的问题。这个功能为客户端提供了极大的灵活性。二、攻击方式LocalStorage的API都是通过Javascript提供的，这样攻击者可以通过XSS攻击窃取信息，例如用户token或者资料。攻击者可以用下面的脚本遍历本...

关于HTML的入门要点

HTML是Hyper Text Makeup Language 的缩写。在设置文本格式时，背景最好是蓝色或黑色，字体为1.6大小，间距1.4。主要使用浏览器依次为谷歌、火狐、openair、IE等，文档分为head、body、paragraph三部分，对应的是开始和结束标签，<head> <body> <p> </p> </body> </head>，一定要注意的是不要忘记结束标签。链接是由<a>定义的，链接的地址是在herf属性中定义的。p+tab键是段落，pre+tab是格式化，strong+tab是加强语气，也就是加粗...

如何使用JS脚本从HTML中分离图片标签与文本，替换文本中指定的内容并加粗（原创）【代码】

var html=‘ddfsdfsdfdsd dfsdfsdffds<img _src="http://localhost:8490/60E86EA7-FE7B-44BF-8270-4DF2036B2118.PNG" data-latex="x=\frac {-b\pm \sqrt {{b}^{2}-4ac}} {2a}" src="http://localhost:8490/60E86EA7-FE7B-44BF-8270-4DF2036B2118.PNG" class="kfformula">dfsdfsrewewrererew ds<img _src="http://localhost:8490/60E86EA7-FE7B-44BF-8270-4DF2036B2118.PNG" data-latex="x=\frac {-b\pm \sqrt {{b}^{2}-4ac}} {2a}...

相比于HTML4，HTML5废弃的元素有哪些？【代码】

第一类：表现性元素basefontbigcenterfontsstrikettu建议用语义正确的元素代替他们，并使用CSS来确保渲染后的效果第二类：框架类元素因框架有很多可用性及可访问性问题，HTML5规范将以下元素移除。frameframesetnoframes但html5支持iframe。第三类:属性类很多表现性的属性也被新规范移除，如下：alignbody标签上的link、vlink、alink、text属性bgcolorheight和widthiframe元素上的scrolling属性valignhspace和vspacetable标签上的c...

html5上传图片【代码】

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-"><title>html 图片上传预览</title><script src="jquery/jquery-1.8.2.min.js" type="text/javascript"></script><script type="text/javascript">$(function(){$("input[type=‘file‘]").change(function(evt){var files = evt.target.files; for (var i =0 , f; f = files[i]; i++) {if (!f.type.match(‘image.*‘)) {continue;...

html框架练习-基本网页制作【代码】

index.html <html><head><title>html框架</title><meta charset="utf-8"></head><frameset rows="90,*,90" noresize="noresize" frameborder="1" border="1"><frame name="top" src="top.html"/><frameset cols="20%,80%"><frame name="left" src="left.html"/><frame name="right" src="right.html"/></frameset><frame name="bottom" src="bottom.html"/></frameset></html>top.html<html><head><title>网页的顶部</title><meta ...

HTML5 常用标签属性【代码】

<input type="submit" value="提交" autofocus="on" formaction="b.jsp"><input type="submit" value="提交" formaction="c.jsp">提交不同的界面上传<input type="file" multiple="multiple">multiple 允许上传多个文件<input type="text" pattern="[0-9]{6}" required="required" placeholder="请输入六位邮箱" title="格式不正确"> pattern里面填正则 required不能为空 placeholder提示内容 title错误后的提示信息原文：http:...

HTML - 技术教程分类

HTML 教程 HTML 简介 HTML 编辑器 HTML 基础 HTML 元素 HTML 属性 HTML 标题 HTML 段落 HTML 文本格式化 HTML 链接 HTML 头部 HTML CSS HTML 图像 HTML 表格 HTML 列表 HTML 区块 HTML 布局 HTML 表单 HTML 框架 HTML 颜色 HTML 颜色名 HTML 颜色值 HTML 脚本 HTML 字符实体 HTML URL HTML 速查列表 HTML 总结 XHTML 简介 HTML 媒体(Media) HTML 插件 HTML 实例 HTML 标签列表（功能排序） HTML 属性 HTML 事件 HTML 画布 HTML 音频/视频 HTML 颜色名 HTML 字符集 HTML ASCII HTML ISO-8859-1 HTML 符号 HTML 语言代码 html 全部

HTML - 最热教程

html5代码如何实现进度条功能？（示例）javascript中html字符串转化为jquerydo...HTML5实战与剖析之CSS选择器——getEle...html5中设置或返回音频/视频是否应该被...HTML5获取设备信息 jQuery打印指定区域Html页面并自动分页...jQuery+HTML5+CSS3制作支持响应式布局时...JS+HTML5实现上传图片预览效果完整实例...php删除html标签和标签内的内容的方法总...XMLHttpRequest中responseText如何获取...

首页 / HTML / html打造动漫人物--哆啦A梦

html打造动漫人物--哆啦A梦

内容导读

内容图文

定义哆啦a梦的容器

画哆啦a梦的头部（包括脸，脸部包括眼睛和鼻子）

画哆啦a梦的嘴巴部分

画哆啦a梦的胡须部分

画哆啦a梦的脖子部分(脖子部分包括铃铛)

完成哆啦a梦的动态效果

内容总结

内容备注

内容手机端

【html打造动漫人物--哆啦A梦】教程文章相关的互联网学习教程文章

AJAX基础（三）——DOM基础及DOM操纵HTML【代码】

MVC中使用HTML Helper类扩展HTML控件【代码】【图】

HTML5基础

网页开发学习笔记五: HTML行内块级元素【代码】

HTML中button标签点击实现页面跳转【代码】

html5shiv.js让吃屎的IE6、IE7、IE8支持html5去吧【代码】

HTML表格标签【代码】

HTML 特殊字符彻底剖析

HTML5安全风险之Web Storage攻击详解

关于HTML的入门要点

如何使用JS脚本从HTML中分离图片标签与文本，替换文本中指定的内容并加粗（原创）【代码】

相比于HTML4，HTML5废弃的元素有哪些？【代码】

html5上传图片【代码】

html框架练习-基本网页制作【代码】

HTML5 常用标签属性【代码】

HTML - 相关标签

HTML - 技术教程分类

HTML - 最新教程

HTML - 最热教程