如何用 html 和 css 画一拳超人

写这篇博客的原由是我看了Medium上的这篇文章：How I started drawing CSS Images，而后哇哦?，一样是前端开发，这区别怎么这么大呢？这位做者和我彻底点了不一样的技能点啊！

看了几个她在codepen上的做品，好比这个皮卡丘，发现用到的技术也并很少，因而我也想试试。

不过有哪一个动漫中的人物足够简单，可以用几个基本的几何图形就画出来呢？我想到了一我的，因而我决定画一个《一拳超人》中的卤蛋，不对，是秃头披风侠——琦玉老师。

结果展现见下：
http://codepen.io/noiron/pen/...

技术概述

从html文件中你能够看到这张图片实际上所有是由div元素组合而成的，一共用到了15个div。在给一个div元素加上适当的css样式后，就造成了脸上的一个部位。

在绘制琦玉的头像时，最重要的一个css属性就是border-radius，咱们用它能够画出圆形、椭圆及各类变体。图中的脸部轮廓、眼睛、耳朵的形状都是由border-radius来实现的，稍后将介绍其使用方法。

另外一个须要说明的css属性是transform，能够实现平移和旋转。

border-radius 介绍

以前我对border-radius的认识只局限于能够给元素加上圆角，以及将其值设为50%可让矩形显示为圆形。查了些资料后，才发现能够用它画出许多图形。

border-radius是如下四个属性的简写，每个属性用于设置一个角的形状：

border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius

图片来自MDN

从上图能够看出当只设置一个值或设置两个相同的值时，显示为圆；设置两个不一样的值时，显示为椭圆。以border-top-left-radius为例：

/* the corner is a circle */
/* border-top-left-radius: radius */
border-top-left-radius: 3px;

/* the corner is an ellipsis */
/* border-top-left-radius: horizontal vertical */
border-top-left-radius: 0.5em 1em;

如果简写形式，则写成以下格式：

border-radius: 48% 48% 50% 50% / 42% 42% 54% 54%;

'/'以前的四个值表示水平轴的长度，'/'以后的四个值表示垂直轴的长度，当水平轴的长度和垂直轴的长度相等时，能够省略'/'及以后的这一组值。

对于同一组的四个数值，也有简写方式。方法与 padding 和 margin 的简写相似，第一个值与第三个值相同或第二个值与第四个值相同时，能够只写一遍。

在了解了border-radius的用法后，经过给div元素合适的宽高比，在调整四个圆角的半径，就可以得到你想要的形状了。

// 如下的样式可以画出琦玉的脸部形状
// 在调整width, height, border-radius 后，可画出眼、鼻、嘴的形状
#div1 {
  width: 100px;
  height: 144px;
  border: 2px solid #000;
  border-radius: 48% 48% 50% 50% / 42% 42% 54% 54%; 
}

transform 介绍

transform属性也是一个很强大的属性，可以对元素作各类变形。不过咱们这里只须要用它来进行平移和旋转的操做。

/* 能够用 translate 来实现平移操做 */
/* translate() 的两个参数分别表示水平方向和垂直方向的平移距离 */
transform: translate(12px, 50%);

/* 上面这一行与下面的这两行是等价的 */
transform: translateX(12px);
transform: translateY(50%);

/* 顺时针旋转20度 */
transform: rotate(20deg);

组合获得最终结果

在你已经将琦玉头像进行拆解，把各个部分都用一个div来表示并加上了合适的样式后，就能将它们组合起来了。你能够用transform来调整它们的距离，或者直接用absoulte定位。

最后就获得了琦玉的头像：

额，秃子，你谁啊！？

看来不是全部的光头都叫琦玉，还须要对细节进行一点调整：

OK，这样就有点像琦玉老师了。最后，若是你愿意的话，还能够用transition属性来稍微加上点动画效果。

再放一遍代码地址：

Codepen代码及展现

---

本文在个人博客上的地址：

如何用 html 和 css 画一拳超人