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