<!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. DevExpress VCL 13.1.2 发布

    DevExpress VCL 的2013 第一个公开版发布, 基本上就是一些维护,没有大的变化,也没有FM 的支持. What's New in DevExpress VCL 13.1.2   Rel ...

  2. 2018.09.15 bzoj1977:次小生成树 Tree（次小生成树+树剖）

    传送门 一道比较综合的好题. 由于是求严格的次小生成树. 我们需要维护一条路径上的最小值和次小值. 其中最小值和次小值不能相同. 由于不喜欢倍增我选择了用树链剖分维护. 代码: #include< ...

  3. S4 exercise -- 模块

    写一个用户登录验证程序,文件如下1234.json {"expire_date": "2021-01-01", "id": 1234, &q ...

  4. 动态链接库编程：非MFC DLL

    设计一个DLL,内含一个函数计算a+b: DLL的组成 .h(头文件) 定义了DLL能够导出的函数.数据结构或类的声明,该文件的声明内容在.CPP文件中实现,而.CPP的源程序被封装到DLL文件中 . ...

  5. 笔记：PS 智能对象

    什么是智能对象? 智能对象是包含栅格或矢量图像(如 Photoshop 或 Illustrator 文件)中的图像数据的图层.智能对象将保留图像的源内容及其所有原始特性,从而让您能够对图层执行非破坏性 ...

  6. tornado+bootstrap急速搭建你自己的网站

    bootstrap既然是这么的流行又能省很多的事为什么不用他呢?再加上牛X的produced by FB的tornado简直如虎添翼了! 1. 安装配置 安装所需要的库等内容.这里没什么需要多讲的.t ...

  7. (KMP扩展 利用循环节来计算) Cyclic Nacklace -- hdu -- 3746

    http://acm.hdu.edu.cn/showproblem.php?pid=3746 Cyclic Nacklace Time Limit: 2000/1000 MS (Java/Others ...

  8. （并查集）Is It A Tree? --POJ--1308

    链接: http://poj.org/problem?id=1308 http://acm.hust.edu.cn/vjudge/contest/view.action?cid=82830#probl ...

  9. oracl中的大数据类型clob

    建表 create table test_name( test_id   number(6) not null, img_data clob ); 在java中该表所对应的po为: class Tes ...

  10. Java Socket重要参数讲解

    (转自http://www.cnblogs.com/ggjucheng/archive/2012/01/06/2314679.html) ( http://docs.oracle.com/javase ...