<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Baymax</title>
<link rel=stylesheet href="demo2.css"/>
</head>
<style>
body {
background: #595959;
}
#baymax{
/*设置为 居中*/
margin: 0 auto;

/*高度*/
height: 600px;

/*隐藏溢出*/
overflow: hidden;
}

#head{
height: 64px;
width: 100px;

/*以百分比定义圆角的形状*/
border-radius: 50%;

/*背景*/
background: #fff;
margin: 0 auto;
margin-bottom: -20px;

/*设置下边框的样式*/
border-bottom: 5px solid #e0e0e0;

/*属性设置元素的堆叠顺序； 拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面*/
z-index: 100;

/*生成相对定位的元素*/
position: relative;
}
#eye,
#eye2{
width: 11px;
height: 13px;
background: #282828;
border-radius: 50%;
position: relative;
top: 30px;
left: 27px;

/*旋转该元素*/
transform: rotate(8deg);
}

#eye2{
/*使其旋转对称*/
transform: rotate(-8deg);
left: 69px; top: 17px;
}

#mouth{
width: 38px;
height: 1.5px;
background: #282828;
position: relative;
left: 34px;
top: 10px;
}
/*躯干和腹部*/

#torso,
#belly{
margin: 0 auto;
height: 200px;
width: 180px;
background: #fff;
border-radius: 47%;

/*设置边框*/
border: 5px solid #e0e0e0;
border-top: none;
z-index: 1;
}

#belly{
height: 300px;
width: 245px;
margin-top: -140px;
z-index: 5;
}

#cover{
width: 190px;
background: #fff;
height: 150px;
margin: 0 auto;
position: relative;
top: -20px;
border-radius: 50%;
}
/*心脏*/

#heart{
width:25px;
height:25px;
border-radius:50%;
position:relative;

/*向边框四周添加阴影效果*/
box-shadow:2px 5px 2px #ccc inset;

right:-115px;
top:40px;
z-index:111;
border:1px solid #ccc;
}
/*手臂*/
#left-arm,
#right-arm{
height: 270px;
width: 120px;
border-radius: 50%;
background: #fff;
margin: 0 auto;
position: relative;
top: -350px;
left: -100px;
transform: rotate(20deg);
z-index: -1;
}

#right-arm{
transform: rotate(-20deg);
left: 100px;
top: -620px;
}
/*手指头*/

#l-bigfinger,
#r-bigfinger{
height: 50px;
width: 20px;
border-radius: 50%;
background: #fff;
position: relative;
top: 250px;
left: 50px;
transform: rotate(-50deg);
}

#r-bigfinger{
left: 50px;
transform: rotate(50deg);
}

#l-smallfinger,
#r-smallfinger{
height: 35px;
width: 15px;
border-radius: 50%;
background: #fff;
position: relative;
top: 195px;
left: 66px;
transform: rotate(-40deg);
}

#r-smallfinger{
background: #fff;
transform: rotate(40deg);
top: 195px;
left: 37px;
}
/*大腿*/
#left-leg,
#right-leg{
height: 170px;
width: 90px;
border-radius: 40% 30% 10px 45%;
background: #fff;
position: relative;
top: -640px;
left: -45px;
transform: rotate(-1deg);
z-index: -2;
margin:0 auto;
}

#right-leg{
background:#fff;
border-radius:30% 40% 45% 10px;
margin:0 auto;
top: -810px;
left:50px;
transform:rotate(1deg);
}

</style>
<body>

<div id="baymax">

<!-- 定义头部，包括两个眼睛、嘴 -->
<div id="head">
<div id="eye"></div>
<div id="eye2"></div>
<div id="mouth"></div>
</div>

<!-- 定义躯干，包括心脏 -->
<div id="torso">
<div id="heart"></div>
</div>

<!-- 定义肚子腹部，包括 cover（和躯干的连接处） -->
<div id="belly">
<div id="cover"></div>
</div>

<!-- 定义左臂，包括一大一小两个手指 -->
<div id="left-arm">
<div id="l-bigfinger"></div>
<div id="l-smallfinger"></div>
</div>

<!-- 定义右臂，同样包括一大一小两个手指 -->
<div id="right-arm">
<div id="r-bigfinger"></div>
<div id="r-smallfinger"></div>
</div>

<!-- 定义左腿 -->
<div id="left-leg"></div>

<!-- 定义右腿 -->
<div id="right-leg"></div>

</div>
</body>
<html>

大白dmeo (转的)的更多相关文章

  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:点击身体的某些 ...

随机推荐

  1. 让QQ好友现形

    方法一 现在使用QQ的朋友,越来越注重保护自己的个人信息,如果对方将个人资料设置为保密你就无法看到对方的资料了,而这位好友如果又有着不断变换昵称的不良习惯,那么随着QQ好友名单的不断增加,时间一长,你 ...

  2. 2018.07.22 bzoj3613: [Heoi2014]南园满地堆轻絮（逆序对结论题）

    传送门 做这道题有一个显然的结论,就是要使这个数列单调不减,就要使所有逆序对保证单调不减,也就是求出所有逆序对的最大差值,然后除以2然后就没了. 代码如下: #include<bits/stdc ...

  3. Django入门与实践-第20章：QuerySets（查询结果集）（完结）

    http://127.0.0.1:8000/boards/1/ #boards/models.py from django.utils.text import Truncator class Topi ...

  4. Hadoop分布式远程Debug方式

    1.进入目录修改配置文件 cd /cloud/hadoop-2.2.0/etc/hadoop vim hadoop-env.sh2.加入内容(文本最后): #远程调试NameNode export H ...

  5. PHP中的mb_convert_encoding与iconv函数介绍

    php传输乱码 mb_convert_encoding这个函数是用来转换编码的.原来一直对程序编码这一概念不理解,不过现在好像有点开窍了. 不过英文一般不会存在编码问题,只有中文数据才会有这个问题.比 ...

  6. (转载)从Java角度理解Angular之入门篇：npm, yarn, Angular CLI

    本系列从Java程序员的角度,带大家理解前端Angular框架. 本文是入门篇.笔者认为亲自动手写代码做实验,是最有效最扎实的学习途径,而搭建开发环境是学习一门新技术最需要先学会的技能,是入门的前提. ...

  7. 对C++里面 的知识积累：

    unique()[去重函数] unique()是C++标准库函数里面的函数,其功能是去除相邻的重复元素(只保留一个),所以使用前需要对数组进行排序 上面的一个使用中已经给出该函数的一个使用方法,对于长 ...

  8. hdu 5020 求3点共线的组合数

    http://acm.hdu.edu.cn/showproblem.php?pid=5020 求3点共线的组合数 极角排序然后组合数相加 #include <cstdio> #includ ...

  9. Android-AppUtils工具类

    常用APP的工具类,包含版本号.版本名称.安装的应用程序ICON public class AppUtils { private AppUtils(){} /** * 设置状态栏的颜色 * @para ...

  10. Windows Phone 8.1 生命周期调试

    之前重装了机子,今天调试时突然找不到调试生命周期的菜单栏了.最后找了5分钟,终于找回来了,特此记录以免以后重装后再出现这种状况. 项目启动调试后: 这样是没有显示调试生命周期的,接下来在工具栏右键: ...