【二次元的CSS】—— 用 DIV + CSS3 画大白（详解步骤）

原本自己也想画大白，正巧看到一位同学（github：https://github.com/shiyiwang）也用相同的方法画了。且细节相当到位。所以我就fork了一下，在此我也分享一下。
同时，我也希望有更多的同学发挥自己的想象力，来找个东西画画。

如果看过我前几次的分享，肯定能马上想到大白的各个部位是怎么实现的。

GitHub传送门：https://github.com/lancer07/css3_Baymax

第一步：头

<div class="baymax-head">

  <div class="head-highlight"></div>

  <div class="baymax-eyes"></div>

</div>

.baymax-head {

  position: absolute;

  left: 50%;

  margin-left: -21px;

  width: 42px;

  height: 28px;

  -webkit-border-radius: 50%;

  -moz-border-radius: 50%;

  -ms-border-radius: 50%;

  border-radius: 50%;

  -webkit-transform: rotate(5deg);

  -moz-transform: rotate(5deg);

  -ms-transform: rotate(5deg);

  -o-transform: rotate(5deg);

  transform: rotate(5deg);

  z-index: 3;

  overflow: hidden;

  -webkit-box-shadow: 0 6px 8px -5px rgba(128, 128, 128, 0.75), inset 0 -6px 8px -5px rgba(204, 204, 204, 0.5);

  -moz-box-shadow: 0 6px 8px -5px rgba(128, 128, 128, 0.75), inset 0 -6px 8px -5px rgba(204, 204, 204, 0.5);

  box-shadow: 0 6px 8px -5px rgba(128, 128, 128, 0.75), inset 0 -6px 8px -5px rgba(204, 204, 204, 0.5);

}

.baymax-head .head-highlight {

  position: absolute;

  top: 12%;

  right: 25%;

  width: 45%;

  height: 1%;

  -webkit-border-radius: 50%;

  -moz-border-radius: 50%;

  -ms-border-radius: 50%;

  border-radius: 50%;

  background: #ffffff;

  -webkit-box-shadow: 0 0 18px 9px #ffffff, 0 0 0 0 transparent;

  -moz-box-shadow: 0 0 18px 9px #ffffff, 0 0 0 0 transparent;

  box-shadow: 0 0 18px 9px #ffffff, 0 0 0 0 transparent;

}

.baymax-head .baymax-eyes {

  position: relative;

  top: 10px;

  left: 50%;

  -webkit-transform: translateX(-10px);

  -moz-transform: translateX(-10px);

  -ms-transform: translateX(-10px);

  -o-transform: translateX(-10px);

  transform: translateX(-10px);

  height: 1px;

  width: 20px;

  background: #333333;

}

.baymax-head .baymax-eyes:before, .baymax-head .baymax-eyes:after {

  top: -3px;

  width: 6px;

  height: 6px;

  background: #333333;

  -webkit-border-radius: 50%;

  -moz-border-radius: 50%;

  -ms-border-radius: 50%;

  border-radius: 50%;

}

.baymax-head .baymax-eyes:before {

  left: -2px;

}

.baymax-head .baymax-eyes:after {

  right: -2px;

}

第二步：身体

<div class="baymax-body">

  <div class="body-highlight"></div>

  <div class="baymax-heart"></div>

</div>

.baymax-body {

  position: absolute;

  top: 18.66667px;

  left: 50%;

  -webkit-transform: translateX(-62px);

  -moz-transform: translateX(-62px);

  -ms-transform: translateX(-62px);

  -o-transform: translateX(-62px);

  transform: translateX(-62px);

  width: 124px;

  height: 180px;

  -webkit-border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;

  -moz-border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;

  -ms-border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;

  border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;

  overflow: hidden;

  z-index: 2;

}

.baymax-body .body-highlight {

  position: absolute;

  top: 20%;

  right: 40%;

  width: 0%;

  height: 50%;

  -webkit-border-radius: 50%;

  -moz-border-radius: 50%;

  -ms-border-radius: 50%;

  border-radius: 50%;

  background: #ffffff;

  -webkit-box-shadow: 0 0 45px 25px #ffffff, 0 0 0 0 transparent;

  -moz-box-shadow: 0 0 45px 25px #ffffff, 0 0 0 0 transparent;

  box-shadow: 0 0 45px 25px #ffffff, 0 0 0 0 transparent;

}

.baymax-body .baymax-heart {

  position: absolute;

  top: 35px;

  right: 30%;

  height: 12px;

  width: 12px;

  -webkit-border-radius: 50%;

  -moz-border-radius: 50%;

  -ms-border-radius: 50%;

  border-radius: 50%;

}

.baymax-body:before, .baymax-body:after {

  top: 55px;

  width: 15px;

  height: 40px;

}

.baymax-body:before {

  left: -8px;

  -webkit-transform: rotate(15deg);

  -moz-transform: rotate(15deg);

  -ms-transform: rotate(15deg);

  -o-transform: rotate(15deg);

  transform: rotate(15deg);

}

.baymax-body:after {

  right: -8px;

  -webkit-transform: rotate(-15deg);

  -moz-transform: rotate(-15deg);

  -ms-transform: rotate(-15deg);

  -o-transform: rotate(-15deg);

  transform: rotate(-15deg);

}

第三步：双手

<div class="baymax-arm baymax-left-arm">

   <div class="arm-highlight larm-highlight"></div>

</div>

<div class="baymax-arm baymax-right-arm">

   <div class="arm-highlight rarm-highlight"></div>

</div>

.baymax-arm {

  position: absolute;

  top: 28px;

  height: 145px;

  width: 40px;

  overflow: hidden;

  z-index: 1;

}

.baymax-arm:after {

  top: 60px;

  height: 50px;

  width: 25px;

}

.baymax-arm .arm-highlight {

  position: absolute;

  top: 25%;

  width: 1%;

  height: 65%;

  -webkit-border-radius: 50%;

  -moz-border-radius: 50%;

  -ms-border-radius: 50%;

  border-radius: 50%;

  background: #ffffff;

  -webkit-box-shadow: 0 0 16px 7px rgba(255, 255, 255, 0.8), 0 0 0 0 transparent;

  -moz-box-shadow: 0 0 16px 7px rgba(255, 255, 255, 0.8), 0 0 0 0 transparent;

  box-shadow: 0 0 16px 7px rgba(255, 255, 255, 0.8), 0 0 0 0 transparent;

}

.baymax-left-arm {

  left: 65px;

  -webkit-transform: rotate(25deg);

  -moz-transform: rotate(25deg);

  -ms-transform: rotate(25deg);

  -o-transform: rotate(25deg);

  transform: rotate(25deg);

  -webkit-border-radius: 90px 20px 20px 90px/200px 40px 40px 200px;

  -moz-border-radius: 90px 20px 20px 90px/200px 40px 40px 200px;

  -ms-border-radius: 90px 20px 20px 90px/200px 40px 40px 200px;

  border-radius: 90px 20px 20px 90px/200px 40px 40px 200px;

}

.baymax-left-arm:after {

  left: -20px;

}

.baymax-left-arm .larm-highlight {

  left: 30%;

}

.baymax-right-arm {

  right: 65px;

  -webkit-transform: rotate(-25deg);

  -moz-transform: rotate(-25deg);

  -ms-transform: rotate(-25deg);

  -o-transform: rotate(-25deg);

  transform: rotate(-25deg);

  -webkit-border-radius: 20px 90px 90px 20px/40px 200px 200px 40px;

  -moz-border-radius: 20px 90px 90px 20px/40px 200px 200px 40px;

  -ms-border-radius: 20px 90px 90px 20px/40px 200px 200px 40px;

  border-radius: 20px 90px 90px 20px/40px 200px 200px 40px;

}

.baymax-right-arm:after {

  right: -20px;

}

.baymax-right-arm .rarm-highlight {

  right: 30%;

}

第四步：双腿

<div class="baymax-leg baymax-left-leg">

    <div class="leg-highlight lleg-highlight"></div>

    <div class="crosspart"></div>

</div>

<div class="baymax-leg baymax-right-leg">

    <div class="leg-highlight rleg-highlight"></div>

    <div class="crosspart"></div>

</div>

.baymax-leg {

  position: absolute;

  top: 165px;

  width: 48px;

  height: 85px;

  overflow: hidden;

  z-index: 1;

}

.baymax-leg:before {

  top: -50px;

  height: 100px;

  width: 30px;

}

.baymax-leg:after {

  bottom: -22px;

  height: 30px;

  width: 60px;

}

.baymax-leg .leg-highlight {

  position: absolute;

  top: 40%;

  width: 1%;

  height: 38%;

  -webkit-border-radius: 50%;

  -moz-border-radius: 50%;

  -ms-border-radius: 50%;

  border-radius: 50%;

  background: #ffffff;

  -webkit-box-shadow: 0 0 16px 7px rgba(255, 255, 255, 0.8), 0 0 0 0 transparent;

  -moz-box-shadow: 0 0 16px 7px rgba(255, 255, 255, 0.8), 0 0 0 0 transparent;

  box-shadow: 0 0 16px 7px rgba(255, 255, 255, 0.8), 0 0 0 0 transparent;

}

.baymax-leg .crosspart {

  content: "";

  position: absolute;

  top: 0;

  width: 48px;

  height: 85px;

  -webkit-box-shadow: inset 0px 0px 15px 0px #cccccc, 0 0 0 0 transparent;

  -moz-box-shadow: inset 0px 0px 15px 0px #cccccc, 0 0 0 0 transparent;

  box-shadow: inset 0px 0px 15px 0px #cccccc, 0 0 0 0 transparent;

}

.baymax-left-leg {

  left: 50%;

  margin-left: -50px;

  -webkit-border-radius: 20% 0 30% 50%/50% 0 30% 50%;

  -moz-border-radius: 20% 0 30% 50%/50% 0 30% 50%;

  -ms-border-radius: 20% 0 30% 50%/50% 0 30% 50%;

  border-radius: 20% 0 30% 50%/50% 0 30% 50%;

}

.baymax-left-leg:before {

  left: -20px;

}

.baymax-left-leg:after {

  left: 0;

}

.baymax-left-leg .lleg-highlight {

  left: 25px;

  -webkit-transform: rotate(-5deg);

  -moz-transform: rotate(-5deg);

  -ms-transform: rotate(-5deg);

  -o-transform: rotate(-5deg);

  transform: rotate(-5deg);

}

.baymax-right-leg {

  right: 50%;

  margin-right: -50px;

  -webkit-border-radius: 0 20% 50% 30%/0 50% 50% 30%;

  -moz-border-radius: 0 20% 50% 30%/0 50% 50% 30%;

  -ms-border-radius: 0 20% 50% 30%/0 50% 50% 30%;

  border-radius: 0 20% 50% 30%/0 50% 50% 30%;

}

.baymax-right-leg:before {

  right: -20px;

}

.baymax-right-leg:after {

  right: 0;

}

.baymax-right-leg .rleg-highlight {

  right: 20px;

  -webkit-transform: rotate(5deg);

  -moz-transform: rotate(5deg);

  -ms-transform: rotate(5deg);

  -o-transform: rotate(5deg);

  transform: rotate(5deg);

}

欢迎大家吐槽

【二次元的CSS】—— 用 DIV + CSS3 画大白（详解步骤）的更多相关文章

【二次元的CSS】—— 用 DIV + CSS3 画咸蛋超人（详解步骤）
[二次元的CSS]—— 用 DIV + CSS3 画咸蛋超人(详解步骤) 2016-05-17 HTML5cn 仅仅使用div作为身体的布局,用css3的各种transform和圆角属性来绘制各部位的 ...
CSS3 transform 属性详解(skew, rotate, translate, scale)
写这篇文章是因为在一个前端QQ群里,网友 "小豆豆" (应他要求要出现他的网名......) ,问skew的角度怎么算,因为他看了很多文章还是不能理解skew的原理.于是,我觉得有 ...
CSS进阶内容—浮动和定位详解
CSS进阶内容-浮动和定位详解我们在学习了CSS的基本知识和盒子之后,就该了解一下网页的整体构成了当然如果没有学习之前的知识,可以到我的主页中查看之前的文章:秋落雨微凉 - 博客园 CSS的三种布 ...
CSS3属性transform详解之（旋转:rotate,缩放:scale,倾斜:skew,移动:translate）
CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate) 在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾 ...
第94天：CSS3 盒模型详解
CSS3盒模型详解盒模型设定为border-box时 width = border + padding + content 盒模型设定为content-box时 width = content所谓定 ...
CSS3属性transform详解【转载】
CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate) 在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾 ...
《网页设计基础——CSS的四种引入方式详解》
网页设计基础--CSS的四种引入方式详解一.行内式: 规则: 1. 行内式是所有样式方法中最为直接的一种,它直接对HTML的标记使用style属性,然后将CSS代码直接写在其中. 格 ...
【二次元的CSS】—— 纯CSS3做的能换挡的电扇
这次分享的电扇,和以往用css3画人物相比多加了一点交互,就是电扇开关的地方,用到了一点点css3的 :checked +div 这个很少用到的选择器来实现的. GitHub传送门:https:// ...
CSS3 中border-image详解
CSS3 border-image详解.应用及jQuery插件一.border-image的兼容性 border-image可以说是CSS3中的一员大将,将来一定会大放光彩,其应用潜力真的是非常的惊 ...

随机推荐

Python：lxml
学习自: python3解析库lxml - Py.qi - 博客园 lxml官方文档 lxml官方文档--lxml中的类.方法使用,如果需要查看某些方法的具体用法,就到这个网页下 python爬虫系列 ...
数据分析logistic回归与时间序列
logistics回归 1.影响关系研究是所有研究中最为常见的. 2.当y是定量数据时,线性回归可以用来分析影响关系. 3.如果现在想对某件事情发生的概率进行预估,比如一件衣服的是否有人想购买? 这里 ...
python中的流程控制
目录引言流程控制的分类分支结构单if结构 if与else结构 if与elif与else结构 if分支的嵌套循环结构 while循环 while + break循环 while + conti ...
JZ-070-数字序列中的某一位数字
数字序列中的某一位数字题目描述数字以 0123456789101112131415... 的格式序列化到一个字符串中,求这个字符串的第 index 位. 题目链接: 数字序列中的某一位数字代码 ...
vue监听有无网络
mounted () { window.addEventListener('offline', function ($event) { alert('offline'); }); wi ...
go RWMutex 的实现
Overview go 里面的 rwlock 是 write preferred 的,可以避免写锁饥饿. 读锁和写锁按照先来后到的规则持有锁,一旦有协程持有了写锁,后面的协程只能在写锁被释放后才能得到 ...
被vector动态扩容给坑了！
大家好,我是东北码农.记录一下工作中事. 前几天,运维同事给我反馈了一个问题: 通过监控发现,线上的一个服务,业务线程时不时会出现卡顿,卡顿大约持续几秒. 我们做金融系统后台开发的,对性能要求很严格的 ...
LGP7847题解
题意:给定 $n$,求方程 $\frac 1 a - \frac 1 b=\frac 1 n$ 的所有解,且解必须满足 $\gcd(a,b,n)=1$. 以下内容搬运自官方题解: 转化一下 ...
MongoDB 事务机制
MongoDB 从4.0 版本开始副本集支持多文档事务,4.2 版本开始分片集群也支持多文档事务.单个集合的单个文档事务在 1.x 就支持. 以下是跟 mongo 事务相关的一些概念: 1. Wr ...
串和KMP算法
一.串串是由零个或多个字符串组成的有限序列 (一).串的定义定长顺序存储特点:每个串变量分配一个固定长度的存储区,即定长数组定义: #define MAXLEN 255 typedef str ...

【二次元的CSS】—— 用 DIV + CSS3 画大白（详解步骤）

第一步：头

第二步：身体

第三步：双手

第四步：双腿

【二次元的CSS】—— 用 DIV + CSS3 画大白（详解步骤）的更多相关文章

随机推荐

热门专题