沒(méi)出現(xiàn)css動(dòng)畫(huà)效果之前要實(shí)現(xiàn)動(dòng)的圖標(biāo)，一般都是插入一張gif的圖片去實(shí)現(xiàn)，隨著CSS3技術(shù)的流行，現(xiàn)在越來(lái)越多比較高級(jí)炫酷的網(wǎng)頁(yè)效果呈現(xiàn)，今天用css代碼實(shí)現(xiàn)一組天氣網(wǎng)站常用到的圖標(biāo)！

如下：

預(yù)覽起來(lái)是可以動(dòng)起來(lái)的，這里只截靜態(tài)圖片！

實(shí)現(xiàn)方法

html結(jié)構(gòu)：

css樣式：

言

在進(jìn)行前端開(kāi)發(fā)時(shí)，圖標(biāo)庫(kù)的使用是一項(xiàng)必須掌握的技巧，目前流行的圖標(biāo)庫(kù)有fontawesome，iconfont等，只需要引入到項(xiàng)目中，然后使用對(duì)應(yīng)的class，就會(huì)得到對(duì)應(yīng)的圖標(biāo)。

但是你們有沒(méi)有想過(guò)，如果是自己的話該怎么去實(shí)現(xiàn)這些圖標(biāo)呢？今天我們就來(lái)看看一些稍微復(fù)雜的圖標(biāo)是如何使用純CSS3實(shí)現(xiàn)吧。

文中的代碼已經(jīng)放到github上了，感興趣的同學(xué)自取。

https://github.com/zhouxiongking/article-pages/blob/master/articles/border/complexFigure.html

CSS3

圖標(biāo)庫(kù)

我們可以先來(lái)看看稍微復(fù)雜的圖標(biāo)的樣子。

圖標(biāo)庫(kù)

從圖標(biāo)中可以看出，都是平時(shí)很常用的正確，錯(cuò)誤，方向鍵，放大，縮小，開(kāi)鎖，解鎖等。

我們從中抽取幾個(gè)，慢慢分析它們是如何實(shí)現(xiàn)的吧。

水杯

水杯的圖標(biāo)如下所示。

水杯圖標(biāo)

我們對(duì)水杯圖標(biāo)進(jìn)行拆分，分為杯身和杯柄兩個(gè)部分。

• 杯身中的白色長(zhǎng)方形就是一個(gè)div，設(shè)置寬度和高度。

• 杯身的四周為黑色都是通過(guò)border實(shí)現(xiàn)，border-bottom比其他三個(gè)放向都要大。

• 杯身的下方是圓角，通過(guò)border-radius設(shè)置，border-radius的右下和左下方向設(shè)置相同的值。

通過(guò)上述的分析，我們可以得到杯身部分的CSS代碼。

杯身CSS代碼

杯柄通過(guò)偽元素:before實(shí)現(xiàn)。

• 杯柄設(shè)置為絕對(duì)定位，修改right值讓中間出現(xiàn)一個(gè)空白。

• 調(diào)整杯柄位置的寬度，只需要和杯身重疊即可。

• 杯柄右上角和右下角的border-radius設(shè)置為特定的值，展現(xiàn)成圓角的樣子。
  

通過(guò)以上的分析，我們可以得到杯柄部分的CSS代碼。

杯柄CSS代碼

心形

首先我們來(lái)看看心形圖案的樣子。

心形圖案

接下來(lái)我們同樣將整個(gè)圖案拆分來(lái)看，分成左右兩個(gè)部分，我們將上述圖案換成兩種不同顏色就一目了然了。

拆分圖案

從圖案中可以看出，它實(shí)際是由兩個(gè)相同的圖行旋轉(zhuǎn)不同的角度構(gòu)成，相同的元素部分，可以通過(guò)設(shè)置border-radius值來(lái)實(shí)現(xiàn)。

我們將左右兩個(gè)半邊的形狀分別通過(guò):before和:after來(lái)實(shí)現(xiàn)，原始的的div形狀的CSS屬性則很簡(jiǎn)單，只需要設(shè)置相對(duì)位置和寬度為0即可。

基本CSS屬性

然后看看:before和:after共有的屬性，主要是保證為元素部分的定位為絕對(duì)定位，然后設(shè)置border-radius的值， 保證上半部分是圓角。

共有CSS屬性

然后是關(guān)鍵的兩半邊各自的CSS屬性。左側(cè)的圖形距左邊應(yīng)該為0，所以left: 0，右側(cè)的圖形距右側(cè)為0，所以right: 0。

各有的CSS屬性

同時(shí)左右兩側(cè)圖案需要進(jìn)行旋轉(zhuǎn)，這里我們選擇旋轉(zhuǎn)48度，這是為什么呢？

很多人一下子可能會(huì)想到旋轉(zhuǎn)45度，我們來(lái)看看旋轉(zhuǎn)45度時(shí)的樣子。

旋轉(zhuǎn)45度

從圖形中可以看出，兩側(cè)有棱角，整個(gè)圖案就顯得不標(biāo)準(zhǔn)，當(dāng)旋轉(zhuǎn)超過(guò)45度時(shí)，棱角的部分就會(huì)被里面的圖案遮住。

所以這里我們選擇旋轉(zhuǎn)48度，達(dá)到最終的效果。

最終效果圖

結(jié)束語(yǔ)

今天這篇文章我們使用純CSS3的屬性畫(huà)出了一個(gè)杯子和心形兩個(gè)稍微復(fù)雜點(diǎn)的圖案，其實(shí)其它圖案也是類似的，只要我們能將其拆分，每個(gè)部分獨(dú)立實(shí)現(xiàn)，再組合就可以達(dá)到圖標(biāo)庫(kù)的效果了。

大家也可以自己動(dòng)手實(shí)現(xiàn)一下噢~