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对象 通过反射创建类对象 通过反射获取类 ...
随机推荐
- 比较偏门的JVM语言Quercus - PHP on JVM
其实,我不确定Quercus是否可以被认定为一门JVM语言:其次Quercus这个东东分开源版与商业版,开源版只能解释执行.而商业版能编译成Java字节码. 但我知道国内,阿里巴巴很早就在使用它,当然 ...
- Linux Shell系列教程之（十四） Shell Select教程
本文是Linux Shell系列教程的第(十四)篇,更多Linux Shell教程请看:Linux Shell系列教程 在上一篇文章:Linux Shell系列教程之(十三)Shell分支语句case ...
- Linux里如何查找文件内容
Linux查找文件内容的常用命令方法. 从文件内容查找匹配指定字符串的行: $ grep "被查找的字符串" 文件名例子:在当前目录里第一级文件夹中寻找包含指定字符串的.in文件g ...
- 【FFmpeg】ffplay播放rtsp视频流花屏问题
问题描述:ffplay播放rtsp视频流时,播放过程中随机出现花屏现象. 基本流程学习:阅读ffplay源码,熟悉其播放rtsp视频流的基本流程. 在ffplay源码阅读和分析的基础上,画出了其播放r ...
- 通过OpenSSL来生成二进制格式证书文件（pfx和cer）
1.生成RSA字符串私钥 genrsa -out private-rsa.key 2.由1中私钥导出*.cer二进制公钥文件 req -new -x509 -key private-rsa.key - ...
- Android 去掉标题和状态栏 达到全屏显示
1,正常显示的标题和状态栏的截图. 2,具体代码 @Override protected void onCreate(Bundle savedInstanceState) { super.onCrea ...
- 桥牌笔记：Skill 4 Series A–Deal 5
南主打5C. 此牌的难点在于:如果黑桃4-2分布时,有没有打成的希望?看来黑桃.红桃.方块各1个失张无法避免? 但希望还是有的,那就是东家拿2张黑桃,并且有3张将牌. 这时庄家可以清2轮将牌,拔2轮黑 ...
- 上传Android代码到Jcenter(解决了字符映射的问题)
请先阅读:http://blog.saymagic.cn/2015/02/16/release-library-to-jcenter.html 最外面的build.gradle // Top-leve ...
- 利用在线工具根据JSon数据自动生成对应的Java实体类
如果你希望根据JSon数据自动生成对应的Java实体类,并且希望能进行变量的重命名,那么“JSON To Java”一定适合你.(下面的地址需要FQ) https://jsontojava.appsp ...
- 《android传感器高级编程》译者序
翻看手机中的应用,就能发现大多数应用都已经使用了传感器.让微信彻底火起来的“附近的人”和“摇一摇”.碰一碰交换信息的Bump.各种运动记录app.神奇的“磁力探测仪”.火爆的游戏Temple Run… ...