今天和大家分享一下使用CSS3繪制騰訊QQ的企鵝Logo的過程。
一、如何使用CSS3來繪制圖形？
網(wǎng)絡(luò)上經(jīng)常能夠看到一些用CSS3繪制的精致圖形，它們通常由矩形，圓形，橢圓，三角形,梯形等組合而成。要想繪制我們自己的圖形，就要先了解下基本圖形的繪制方法了。
一個display：block的元素設(shè)定寬高之后表現(xiàn)為矩形。通過設(shè)定border-radius可以得到圓角矩形，圓形和橢圓形。
在使用border-radius時，有幾點可能需要注意一下：
1.border-radius，可以分別對4個角進(jìn)行設(shè)定。 例如上圖：border-top-left-radius: apx bpx;
2.border-xxx-xxx-radius的兩個值分別代表著橢圓長軸和短軸長度的一半，通常簡寫的時候例如border-top-left-radius: 10px;(border-top-left-radius:10px 10px;) 表明長軸和短軸的長度均為20px，也就是半徑為10px的圓形（圓角部分）。
3.當(dāng)使用百分比數(shù)值時，a 相對于width， b相對于height
如果a == width/2, b == height/2，結(jié)果就是一個橢圓，與此同時a==b，那么就可以得到一個半徑為a的圓形了。
在看三角形之前，首先看看三角形的“繪制者”border，下面的例子：
.test{
border: 20px solid;
border-top-color:#ff0000;
border-right-color:#00ff00;
border-bottom-color:#0000ff;
border-left-color:#FFFF00;
width:100px;
height: 100px;
background: #272822;
}
將每個boder的顏色值設(shè)為不一樣，就可以清楚的看到每個border的負(fù)責(zé)區(qū)域，有三角形的雛形了。其實，繪制三角形的原理很簡單，如下圖
我們可以這樣去理解一個border所代表的區(qū)域，那就是“三角形x2 + 矩形”，以border-bottom為例，
矩形 = width x ( border-bottom-width )
相鄰的border交叉的區(qū)域構(gòu)成一個矩形，每個border各負(fù)責(zé)一半，一個直角三角形。只要將其中的一個border的顏色值設(shè)為transparent或者背景色，從視覺上就可以得到一個直角三角形了。
- 三角形1 = border-left-width x border-bottom-width
- 三角形2 = border-right-width x border-bottom-width
當(dāng)width = 0 （height = 0, border-left || border-right）時，我們通過調(diào)整border的寬度可以將這兩個直角三角形拼接成任意形狀的三角形，或者調(diào)整width(height)等獲得一個梯形，當(dāng)然梯形也可以通過拼圖得到，這樣不是更簡單嗎？。Transform中旋轉(zhuǎn)將為我們提供更多的靈活變化。
二、繪制企鵝公司LOGO
結(jié)束了對于基本圖形部分的一些討論，開始著手于QQ 企鵝的繪制。
第一步當(dāng)然是基本框架的繪制了。
通過對手里的Logo圖像的觀察，按照層次劃分來組合最終的效果。選擇使用絕對位置position:absolute;來布局各個元素。主要劃分為頭部，身體，圍脖，雙手，雙腳。
框架的結(jié)果圖：
介紹下這個過程中幾個比較典型的圖形繪制方法：
1、企鵝的眼睛：橢圓，直接設(shè)置border-radius:50% 50%; 即可[因為寬高分別為44px和66px，所以也可以這樣設(shè)定：border-radius: 22px / 33px]
2、圍脖的尾部：一個圓角各異的矩形，所以這里需要對幾個角分別設(shè)定border-radius，微調(diào)的結(jié)果為
- border-bottom-left-radius: 50% 43%;
- border-bottom-right-radius: 15px;
- border-top-left-radius: 20% 57%;
3、企鵝的胳膊：手的繪制較為麻煩一點，可以分為上下兩個部分，將繪制的結(jié)果拼接到一起。那么對于不需要的部分怎么辦呢？我們可以將上(下)部分放到一個div(container)中，利用overflow:hidden的屬性來截取所要的部分。繪制復(fù)雜圖形的時候常用的方法就是切割和拼接，將圖形切割成一個個簡單的小塊，通過層疊和旋轉(zhuǎn)變化進(jìn)行組合。
使用transform:rotate(deg)的時候，優(yōu)先設(shè)定transform-origin屬性，會比較方便。設(shè)定的點作為中心點，整個圖形繞著這個點進(jìn)行角度變化。例如：transform-origin:bottom left， 使用左下角作為原點。也可以使用具體的像素值和百分比。
在基本的框架線條中比非常多的使用了border-radius用于構(gòu)造各種曲線條，小企鵝是圓圓胖胖的，:)
接下來就是對只有基本線條的小企鵝進(jìn)行著色了。著色的過程可以幫助我們調(diào)整z-index，也就是各個模塊的重疊層次，遮蓋了一些無用的線條和框角。
填充顏色之后的企鵝看起來好多了，可是總感覺有點不對勁。嘴巴的形狀不夠性感，圍脖竟然沒折，小企鵝的腳趾去哪了，穿鞋了嗎？
剩余的工作就是對這些細(xì)節(jié)上的問題進(jìn)行修復(fù)，這里主要使用兩種圖形：
1、繪制一個斜邊三角形，修復(fù)嘴唇的層次感：
繪制這樣一個斜邊三角形，步驟分解如圖所示：
先是繪制一個普通三角形，通過逆時針旋轉(zhuǎn)得到一個修復(fù)三角形，那么相對稱的修復(fù)三角形可以通過使用rotateY，繞著Y軸旋轉(zhuǎn)180度，來得到。
2、繪制一個“小尾巴”
- border-right: 6px solid black;
- width: 100px;
- height: 70px;
- border-bottom-right-radius: 70px 70px;
當(dāng)對一個角應(yīng)用圓角樣式，如果這個角相鄰的兩個border一個有定義而一個無定義，那么繪制的結(jié)果就是由粗到細(xì)的“小尾巴了”。[在整個繪制過程中，同一個圖形它的繪制方法有很多種，例如一個矩形可以用 width x height構(gòu)成，也可以由border x height(width)構(gòu)成，甚至可以由border組合(width = height = 0)構(gòu)成，根據(jù)情況選擇吧。]
將這些修復(fù)應(yīng)用到小企鵝上，得到最終的效果圖：
怎么樣？是不是很棒？當(dāng)然用CSS來繪制騰訊公司企鵝LOGO對持術(shù)人員來說，百比較簡單的，但是普通人來說難度就大大的有了，不過你也可以用簡便的方法來設(shè)計公司LOGO，當(dāng)然用CSS繪制的騰訊公司LOGO的優(yōu)勢就是占用資源小。
今天用純CSS繪制騰訊公司企鵝LOGO設(shè)計教程就到這里，希望能給設(shè)計師們有所啟發(fā)，僅供參考。
