html之大白
<!doctype html>
<html> <head>
<meta charset="utf-8">
<title>Baymax</title> <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> </head> <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>
html之大白的更多相关文章
- Quartz2D 画大白
今天初始Quartz2D,我好激动啊,也好开心,莫名的会喜欢带有图形相关的课程…… 好啦,闲话少说,今天用Quartz2D方法画了最最爱的大白.迫不及待的想要和大家分享. 1.首先实例化了view 2 ...
- css3画图之大白(●—●)
把大白送给你~ <!DOCTYPE html> <html> <head> <title>大白</title> <meta http- ...
- html打造动画【系列1】- 萌萌的大白
每个人心中都有一个暖暖的大白,blingbling的大眼睛~软软的肚子~宽厚的肩膀~善良的心肠~如果可以,我愿意沦陷在大白的肚子里永远不出来,哈哈~毛球要失宠咯~ 哈哈哈 每个人都是独立的个体,大白也 ...
- 用纯CSS画大白
纯CSS打造网页大白知识点: 首先要把大白分割,整体baymax中包含header(eye1,eye2,mouth),torso(heart),belly(cover),l-bigfinge ...
- 大白话说Java泛型（一）：入门、原理、使用
文章首发于[博客园-陈树义],点击跳转到原文<大白话说Java泛型(一):入门.原理.使用> 远在 JDK 1.4 版本的时候,那时候是没有泛型的概念的.当时 Java 程序员们写集合类的 ...
- 大白话说Java泛型（二）：深入理解通配符
文章首发于[博客园-陈树义],点击跳转到原文<大白话说Java泛型(二):深入理解通配符> 上篇文章<大白话说Java泛型(一):入门.原理.使用>,我们讲了泛型的产生缘由以及 ...
- 大白话说Java反射：入门、使用、原理
文章首发于[博客园-陈树义],点击跳转到原文<大白话说Java反射:入门.进阶.原理> 反射之中包含了一个「反」字,所以想要解释反射就必须先从「正」开始解释. 一般情况下,我们使用某个类时 ...
- 大白话说Java泛型：入门、使用、原理
文章首发于[博客园-陈树义],点击跳转到原文<大白话说Java泛型:入门.使用.原理> 远在 JDK 1.4 版本的时候,那时候是没有泛型的概念的.当时 Java 程序员们写集合类的代码都 ...
- 前些日子用css画的大白
闲来无事用css画的一个大白...其实有一些地方偷懒了用svg去画的,因为用纯几何形状组合去画变化那么复杂的曲线不太现实.但svg曲线坐标还是自己一点点调出来的,没有用工具生成. ps:点击身体的某些 ...
- 大白话说Java反射：入门、使用、原理 （转）
文章首发于[博客园-陈树义],点击跳转到原文<大白话说Java反射:入门.进阶.原理> 目录 一个简单的例子 反射常用API 获取反射中的Class对象 通过反射创建类对象 通过反射获取类 ...
随机推荐
- MySQL架构
一．MySQL逻辑架构 第一层,即最上一层,所包含的服务并不是MySQL所独有的技术.它们都是服务于C/S程序或者是这些程序所需要的 :连接处理,身份验证,安全性等等. ...
- 设置php下载文件的超时时间
使用curl 可以使用curl自己实现一个curl_file_get_contents函数 //CURLOPT_FOLLOWLOCATION TRUE 时将会根据服务器返回 HTTP 头中的 &quo ...
- 清除浮动after
.clearf{display: inline-block;} .clearf:after { content: "."; display: block; height:; cle ...
- c#泛型方法返回null的问题
c#的泛型方法实现和java实现有点不同,在java中,所有的泛型方法运行时类型必须是引用类型,所以和非泛型一样可以返回null. 但是c#中有点不同,可以同时是值类型和引用类型,而值类型不能赋值nu ...
- weblogic 12c下jxls导出excel报错Could not initialize class org.apache.poi.xssf.usermodel.XSSFVMLDrawing
周一,开发反馈weblogic 12c下jxls导出excel报错,公司环境和UAT环境均报错,看日志如下: 2016-06-08 09:16:55,825 ERROR org.jxls.util.T ...
- play framework学习笔记之 模板引擎
模板语法 ${client.name} ${client?.name} 不能确定client是否存在的时候? #{extends /} #{doLayout /}#{get} #{set} 比如 #{ ...
- andriod ==和equals
== 用于数字 equals用于字符
- 通用javascript方法
//将序列化成json格式后日期(毫秒数)转成日期格式 YYYY-MM-DD HH:MI:SS function ChangeDateFormat(cellval, type) { var date ...
- ubuntu解决arm-linux-gcc no such file的问题
这种情况是因为你的操作系统是Ubuntu 64位的,而交叉编译工具链都是32位执行程序.要成功运行这些交叉编译工具链,需要与这些工具链相关的32位库.安装命令如下:sudo apt-get insta ...
- Android源码分析之HandlerThread
HandlerThread是一种特殊的Thread,也就是有Looper的thread,既然有looper的话,那我们就可以用此looper来 创建一个Handler,从而实现和它的交互,比如你可以通 ...