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对象 通过反射创建类对象 通过反射获取类 ...
随机推荐
- csharp:Nhibernate Procedure with CreateSQLQuery and GetNamedQuery
<?xml version="1.0" encoding="utf-8"?> <hibernate-mapping assembly=&quo ...
- 解决My eclipse 工程发布时端口占用问题
如果运行后如图的错,需要进行如下操作来解决: a:打开cmd,输入netstat -ano 找到本地地址为8080的最后一项的数字,这个数字就是端口号. b:再输入taskkill /t /pid 端 ...
- Asp.Net MVC开源论坛中文版
支持多国语言 支持多种数据库,开盖即饮(因为EF支持),无需安装. 积分 等级 权限 角色 标签 Rss 表情 附件 审核 问答 投票 收藏 日志 排行榜与热点 主题,默认Bootstrap响应式 最 ...
- pace.js和NProgress.js两个加载进度插件的一点小总结
这两个插件都是关于加载进度动画的,应该说各有特点吧,最起码对我来说是各有优势的.今天一天就捣鼓了加载进度动画,也研究了大量的(也就这两个)加载进度动画,也算对加载进度动画有了一个初步的了解了吧. NP ...
- jQuery pgwslideshow 空间相册
一个响应式相册插件,你可以自定义幻灯片最大高度,滑动效果,是否显示控制按钮,自动轮播或间隔时间. pgwslideshow相册插件有以下特点 支持响应式 支持桌面和移动设备 代码简单 ...
- PowerDesign设置列名与表名的大小写规则
因为设计的Model是要用到Oracle 11g的,Oracle 11g的表名和列名默认是大写,在设计模型当中小写转大写一直很苦闹,发现PowerDedign可以直接设置,见下文: 打开Tools-- ...
- Struts2(十七)验证框架二
一.实现注册验证 package com.pb.entity; import java.util.Date; /** * 用户实体类 * */ public class User { /** * 住址 ...
- Silverlight项目笔记3:Silverlight RIA Services缓存引发的问题
问题描述:使用Silverlight的RIA Services进行数据库更新操作,重复提交时发现异常,SubmitOperation发生错误,提示实体类冲突,检查发现之前删除的数据竟然还存在(数据库 ...
- iOS之 kamailio-4.3.4sip服务器搭建-mac
如要转载请注明出处http://www.cnblogs.com/chengxiaoyu/p/5006352.html 1.安装MySQL 去http://www.mysql.com/下载最新版本的My ...
- Objective-C之Block
Block基本概念 本小节知识点: [了解]什么是Block [理解]block的格式 1.什么是Block Block是iOS中一种比较特殊的数据类型 Block是苹果官方特别推荐使用的数据类型, ...