如何用 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 畫一拳超人