CSS画个大白有哪些技巧

August 29, 2016

最近看到不少纯 CSS 打造的图案和动画，效果很精巧，也非常有趣，就像这个大白(作者的原链接在这里)，其实实现这样的图案有很多重复的技巧。就拿这个大白举例：

先来读一读源代码：

HTML

<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>
  
  <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>

CSS

body {
  background: #eee;
}

#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);
}

技巧一：清晰的HTML代码结构

这个技巧好模糊，为什么和没说一样，先看看大白的 HTML 结构，其实实现这样的图案就是一个组合的过程，大白的 HTML 结构写的很清晰，只要阅读完大白的 HTML 的源码就可以理解组合的含义，先拆分大白的所有身体部分，比如：头部是一个独立的部分，眼睛和鼻子（或嘴巴？不知道大白的眼睛间的那条横线是那个器官啦。）都在头部，所以被包含在一个 div 上，依次类推，组合所有大白的身体部位。

组合完的不同的部位就需要填充样式，控制位置，这两点应该是最重要的。

技巧二：位置控制

位置的控制是图形组合展示的最重要的部分了，不仅需要控制图形的位置，还需要考虑层叠的顺序。那这就很明显了，一个是用到了 postion 方法，一个用到 z-index 方法。

需要注意的是 postion 方法使用 relative ，相对定位更好和嵌套的元素组合控制位置，比如：眼睛在头部，那么控制眼睛的位置相对头部的位置更好，如果我们想让大白摇一摇头只需要控制大白的头部就可以，不需要担心眼睛的位置走位。当然具体的 top，left 值需要自己精确的计算了。

z-index 不需要过多赘述，正常的使用方法，但效果很好。

最后还有一个方法需要注意：transform，像大白的眼睛，当然 transform 有更多好玩的方法可以使用，灵活的使用需要更多的熟悉和练习。

技巧三：巧用border控制图案形状

图案形状要求高才可以更形象，才有用 CSS 实现这样的图案的意义，否则还不如直接使用图片效果更好。一般可以控制到图案的方法都是和 border 相关的。

特别常用的是：border-radius 和 border。

border 的使用可以看我的《巧用border实现梯形和三角形》这篇文章，这里就不多说了，border 的使用不仅仅是边框的作用。

对于 border-radius 有一点需要知道，border-radius 可以单独设置四个圆角的大小。那这样就可以灵活的控制图案的形状了，具体的例子就看大白的胳膊：

#left-leg,
#right-leg{
  border-radius: 40% 30% 10px 45%;
}

绘画的时候，为了让图形更饱满，生动，一定会添加阴影，这里也是一样，我们使用 box-shadow 给图案添加阴影。box-shadow 可以设置一个或多个阴影效果，如果元素同时设置了 border-radius ，阴影也会有圆角效果。

其实，自己动手写一个这样的图案不是很难，让这样的图形动起来也很简单，这个过程不仅有趣，还可以加强了对 CSS 的理解。