1.  <!doctype html>
  2.  <html>
  3.  
  4.  <head>
  5.  <meta charset="utf-8">
  6.  <title>Baymax</title>
  7.  
  8.  <style>
  9.  body {
  10.      background: #595959;
  11.  }
  12.  
  13.  #baymax {
  14.  
  15.      /*设置为 居中*/
  16.      margin: 0 auto;
  17.  
  18.      /*高度*/
  19.      height: 600px;
  20.  
  21.      /*隐藏溢出*/
  22.      overflow: hidden;
  23.  }
  24.  
  25.  #head {
  26.      height: 64px;
  27.      width: 100px;
  28.  
  29.      /*以百分比定义圆角的形状*/
  30.      border-radius: 50%;
  31.  
  32.      /*背景*/
  33.      background: #fff;
  34.      margin: 0 auto;
  35.      margin-bottom: -20px;
  36.  
  37.      /*设置下边框的样式*/
  38.      border-bottom: 5px solid #e0e0e0;
  39.  
  40.      /*属性设置元素的堆叠顺序；
  41.      拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面*/
  42.      z-index: 100;
  43.  
  44.      /*生成相对定位的元素*/
  45.      position: relative;
  46.  }
  47.  
  48.  #eye,
  49.  #eye2 {
  50.      width: 11px;
  51.      height: 13px;
  52.      background: #282828;
  53.      border-radius: 50%;
  54.      position: relative;
  55.      top: 30px;
  56.      left: 27px;
  57.  
  58.      /*旋转该元素*/
  59.      transform: rotate(8deg);
  60.  }
  61.  
  62.  #eye2 {
  63.  
  64.      /*使其旋转对称*/
  65.      transform: rotate(-8deg);
  66.      left: 69px;
  67.      top: 17px;
  68.  
  69.  }
  70.  
  71.  #mouth {
  72.      width: 38px;
  73.      height: 1.5px;
  74.      background: #282828;
  75.      position: relative;
  76.      left: 34px;
  77.      top: 10px;
  78.  }
  79.  
  80.  #torso,
  81.  #belly {
  82.      margin: 0 auto;
  83.      height: 200px;
  84.      width: 180px;
  85.      background: #fff;
  86.      border-radius: 47%;
  87.  
  88.      /*设置边框*/
  89.      border: 5px solid #e0e0e0;
  90.      border-top: none;
  91.      z-index: 1;
  92.  }
  93.  
  94.  #belly {
  95.      height: 300px;
  96.      width: 245px;
  97.      margin-top: -140px;
  98.      z-index: 5;
  99.  }
  100.  
  101.  #cover {
  102.      width: 190px;
  103.      background: #fff;
  104.      height: 150px;
  105.      margin: 0 auto;
  106.      position: relative;
  107.      top: -20px;
  108.      border-radius: 50%;
  109.  }
  110.  
  111.  #heart{
  112.    width:25px;
  113.    height:25px;
  114.    border-radius:50%;
  115.    position:relative; 
  116.  
  117.    /*向边框四周添加阴影效果*/
  118.    box-shadow:2px 5px 2px #ccc inset; 
  119.  
  120.    right:-115px;
  121.    top:40px;
  122.    z-index:111;
  123.    border:1px solid #ccc;
  124.  }
  125.  
  126.  #left-arm,
  127.  #right-arm {
  128.      height: 270px;
  129.      width: 120px;
  130.      border-radius: 50%;
  131.      background: #fff;
  132.      margin: 0 auto;
  133.      position: relative;
  134.      top: -350px;
  135.      left: -100px;
  136.      transform: rotate(20deg);
  137.      z-index: -1;
  138.  }
  139.  
  140.  #right-arm {
  141.      transform: rotate(-20deg);
  142.      left: 100px;
  143.      top: -620px;
  144.  }
  145.  
  146.  #l-bigfinger,
  147.  #r-bigfinger {
  148.      height: 50px;
  149.      width: 20px;
  150.      border-radius: 50%;
  151.      background: #fff;
  152.      position: relative;
  153.      top: 250px;
  154.      left: 50px;
  155.      transform: rotate(-50deg);
  156.  }
  157.  
  158.  #r-bigfinger {
  159.      left: 50px;
  160.      transform: rotate(50deg);
  161.  }
  162.  
  163.  #l-smallfinger,
  164.  #r-smallfinger {
  165.      height: 35px;
  166.      width: 15px;
  167.      border-radius: 50%;
  168.      background: #fff;
  169.      position: relative;
  170.      top: 195px;
  171.      left: 66px;
  172.      transform: rotate(-40deg);
  173.  }
  174.  
  175.  #r-smallfinger {
  176.      background: #fff;
  177.      transform: rotate(40deg);
  178.      top: 195px;
  179.      left: 37px;
  180.  }
  181.  
  182.  #left-leg,
  183.  #right-leg {
  184.      height: 170px;
  185.      width: 90px;
  186.      border-radius: 40% 30% 10px 45%;
  187.      background: #fff;
  188.      position: relative;
  189.      top: -640px;
  190.      left: -45px;
  191.      transform: rotate(-1deg);
  192.      z-index: -2;
  193.      margin: 0 auto;
  194.  }
  195.  
  196.  #right-leg {
  197.      background: #fff;
  198.      border-radius:30% 40% 45% 10px;
  199.      margin: 0 auto;
  200.      top: -810px;
  201.      left: 50px;
  202.      transform: rotate(1deg);
  203.  }
  204.  
  205.  </style>
  206.  
  207.  </head>
  208.  
  209.  <body>
  210.      <div id="baymax">
  211.  
  212.          <!-- 定义头部，包括两个眼睛、嘴 -->
  213.          <div id="head">
  214.              <div id="eye"></div>
  215.              <div id="eye2"></div>
  216.              <div id="mouth"></div>
  217.          </div>
  218.  
  219.          <!-- 定义躯干，包括心脏 -->
  220.          <div id="torso">
  221.              <div id="heart"></div>
  222.          </div>
  223.  
  224.          <!-- 定义肚子腹部，包括 cover（和躯干的连接处） -->
  225.          <div id="belly">
  226.              <div id="cover"></div>
  227.          </div>
  228.  
  229.          <!-- 定义左臂，包括一大一小两个手指 -->
  230.          <div id="left-arm">
  231.              <div id="l-bigfinger"></div>
  232.              <div id="l-smallfinger"></div>
  233.          </div>
  234.  
  235.          <!-- 定义右臂，同样包括一大一小两个手指 -->
  236.          <div id="right-arm">
  237.              <div id="r-bigfinger"></div>
  238.              <div id="r-smallfinger"></div>
  239.          </div>
  240.  
  241.          <!-- 定义左腿 -->
  242.          <div id="left-leg"></div>
  243.  
  244.          <!-- 定义右腿 -->
  245.          <div id="right-leg"></div>
  246.  
  247.      </div>
  248.  </body>
  249.  
  250.  </html>

html之大白的更多相关文章

  1. Quartz2D 画大白

    今天初始Quartz2D,我好激动啊,也好开心,莫名的会喜欢带有图形相关的课程…… 好啦,闲话少说,今天用Quartz2D方法画了最最爱的大白.迫不及待的想要和大家分享. 1.首先实例化了view 2 ...

  2. css3画图之大白(●—●)

    把大白送给你~ <!DOCTYPE html> <html> <head> <title>大白</title> <meta http- ...

  3. html打造动画【系列1】- 萌萌的大白

    每个人心中都有一个暖暖的大白,blingbling的大眼睛~软软的肚子~宽厚的肩膀~善良的心肠~如果可以,我愿意沦陷在大白的肚子里永远不出来,哈哈~毛球要失宠咯~ 哈哈哈 每个人都是独立的个体,大白也 ...

  4. 用纯CSS画大白

    纯CSS打造网页大白知识点:      首先要把大白分割,整体baymax中包含header(eye1,eye2,mouth),torso(heart),belly(cover),l-bigfinge ...

  5. 大白话说Java泛型（一）：入门、原理、使用

    文章首发于[博客园-陈树义],点击跳转到原文<大白话说Java泛型(一):入门.原理.使用> 远在 JDK 1.4 版本的时候,那时候是没有泛型的概念的.当时 Java 程序员们写集合类的 ...

  6. 大白话说Java泛型（二）：深入理解通配符

    文章首发于[博客园-陈树义],点击跳转到原文<大白话说Java泛型(二):深入理解通配符> 上篇文章<大白话说Java泛型(一):入门.原理.使用>,我们讲了泛型的产生缘由以及 ...

  7. 大白话说Java反射：入门、使用、原理

    文章首发于[博客园-陈树义],点击跳转到原文<大白话说Java反射:入门.进阶.原理> 反射之中包含了一个「反」字,所以想要解释反射就必须先从「正」开始解释. 一般情况下,我们使用某个类时 ...

  8. 大白话说Java泛型：入门、使用、原理

    文章首发于[博客园-陈树义],点击跳转到原文<大白话说Java泛型:入门.使用.原理> 远在 JDK 1.4 版本的时候,那时候是没有泛型的概念的.当时 Java 程序员们写集合类的代码都 ...

  9. 前些日子用css画的大白

    闲来无事用css画的一个大白...其实有一些地方偷懒了用svg去画的,因为用纯几何形状组合去画变化那么复杂的曲线不太现实.但svg曲线坐标还是自己一点点调出来的,没有用工具生成. ps:点击身体的某些 ...

  10. 大白话说Java反射：入门、使用、原理 （转）

    文章首发于[博客园-陈树义],点击跳转到原文<大白话说Java反射:入门.进阶.原理> 目录 一个简单的例子 反射常用API 获取反射中的Class对象 通过反射创建类对象 通过反射获取类 ...

随机推荐

  1. 当使用母版页时JavaScript客户端获取服务器控件的Id

    当使用MasterPage.UserControl等容器时,为了避免控件的重复命名,asp.net会自动将容器中的控件生成一个ClientID(Control Tree中的可生成,否则不会生成). J ...

  2. POSTMAN and HTTPie to test APIs

    http://blog.mashape.com/postman-httpie-test-apis/ We love working with APIs at Mashape, and we love ...

  3. 内核移植和文件系统制作（2）：linux内核最小系统和initramfs文件系统

    linux内核最小系统,使用内核版本:https://www.kernel.org/pub/linux/kernel/v3.0/linux-3.8.1.tar.bz2 1,FL2440板子的基本硬件: ...

  4. 伏羲八卦、文王六十四卦、老子阴阳太极、西方哲学辩证与"解耦和复用”思想的异曲同工之妙

    伏羲八卦.文王六十四卦.老子阴阳太极.西方哲学辩证与"解耦和复用”思想的异曲同工之妙     问题:任何程序语言在遇到复杂逻辑时,代码维护难度就会加大,如何处理该问题? 答案:重构,模块化. ...

  5. HTML5中的音视频处理

    * 音视频处理 * 视频处理 * 基本内容 * 使用Flash技术处理HTML页面中的视频内容 * 包含音频.动画.网页游戏等 * 特点 * 浏览器原生不支持(IE浏览器要求安装ActiveX组件) ...

  6. SharePoint 使用PowerShell恢复误删的网站集

    在SharePoint网站集的使用中,我们很有可能会误删我们需要的网站集,SharePoint其实并没有把网站集删掉,只是放到了SPDeletedSite中,这样,我们还可以通过PowerShell找 ...

  7. Mybatis学习记录（七）----Mybatis查询缓存

    1. 什么是查询缓存 mybatis提供查询缓存,用于减轻数据压力,提高数据库性能. mybaits提供一级缓存,和二级缓存. 一级缓存是SqlSession级别的缓存.在操作数据库时需要构造 sql ...

  8. 2015年第14本（英文第10本）：The A.B.C. Murders (A.B.C谋杀案)

    书名:The ABC Murders 推荐指数:5星 作者:Agatha Christie 单词数:7万 不重复单词数:不详 首万词不重复单词数:不详 蓝思值:740 阅读时间:2015年7月18日 ...

  9. 说说Python多线程中的daemon属性方法

    大家看多线程部分的时候肯定看到过daemon这个属性,当我在百度了一圈后也没发现有比较好的解释(或者大家对这个解释都非常清楚),于是自己通过代码和官方介绍了解它,进行了一些总结 给大家一些参考. 首先 ...

  10. 二叉堆(binary heap)

    堆(heap) 亦被称为:优先队列(priority queue),是计算机科学中一类特殊的数据结构的统称.堆通常是一个可以被看做一棵树的数组对象.在队列中,调度程序反复提取队列中第一个作业并运行,因 ...