<!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. eclipse 远程调试mapreduce

    使用环境:centos6.5+eclipse(4.4.2)+hadoop2.7.0 1.下载eclipse hadoop 插件  hadoop-eclipse-plugin-2.7.0.jar 粘贴到 ...

  2. hibernate createQuery和createSQLQuery 查询结果count计算

    createQuery 针对hql语句查询 Query query=getSession().createQuery(hql);int result =((Number) query.iterate( ...

  3. python corrcoef

    该函数得到相关系数矩阵. 例子: vc=[1,2,39,0,8] vb=[1,2,38,0,8] print mean(multiply((vc-mean(vc)),(vb-mean(vb))))/( ...

  4. 解决：无法在发送 HTTP 标头之后进行重定向。 跟踪信息: 在 System.Web.HttpResponse.Redirect(String url, Boolean endResponse, Boolean permanent) 在 System.Web.Mvc.Async.AsyncControllerActionInvoker.<>……

    问题:在MVC的过滤器中验证用户状态时报如下错误:   无法在发送 HTTP 标头之后进行重定向. 跟踪信息:   在 System.Web.HttpResponse.Redirect(String  ...

  5. 『IOS』 遇到问题记录(长期更新)

    遇到的很多问题,解决后都是自己记着,以为不会忘记,之后却会想不起来了. 所以把今后解决的问题记录在这. 一. 在二级页面设置了CAlayer的代理,在返回一级页面报错: EXC_BAD_ACCESS( ...

  6. [leetcode] 20. Valid Sudoku

    这道题目被放在的简单的类别里是有原因的,题目如下: Determine if a Sudoku is valid, according to: Sudoku Puzzles - The Rules. ...

  7. WinRT 中后台任务类的声明

    要实现后台任务,需要实现IBackgroundTask接口 public sealed class SimpleTask : IBackgroundTask { public void Run(IBa ...

  8. visual studio code 中隐藏从 ts 文件生成的 js 文件和 map 文件

    typescript 文件编译产生的 js 和 map 文件不需要手工编辑,打开[文件][首选项][工作区设置],放入以下代码: // 将设置放入此文件中以覆盖默认值和用户设置. { "fi ...

  9. 集体智慧编程-discovering groups

    这一章讲的是利用聚集算法对blog进行分类. 首先是构造数据,找到一组blog,每个blog包含一组单词.这样就形成了(blog-name, word*)*的数据结构. 在构造该数据结构的过程中,还需 ...

  10. Python: 读写Excel（openpyxl / win32com.client）

    项目周报汇报的时候要做数据汇总,总是要从不同的excel文件中去获取数据最后汇总到一个excel表里面,所以决定用python直接写个自动化脚本来自动执行. 用python来读写excel,目前找了2 ...