使用CSS3製做72個webapp圖標

前言

      移動網絡帶寬的快慢直接影響webapp應用體驗效果的優差，其中加載圖片是很耗流量的，因此對這一方面的性能優化是很須要的。通常對於那些小而多的圖片（圖標）都會採用sprite合併成一張圖片來減小http的請求次數。而CSS3的出現，無疑在移動端對圖標的優化有着比較大的幫助。爲此，本身也琢磨使用CSS3來製做一些經常使用的圖標。有句話這麼說：能用CSS3就不用圖片！

正題

      因而用了一天的時間，我製做了72個相對比較經常使用的圖標，圖標效果圖整理以下：

 

 

今天就跟你們一塊兒分享一下：

首先，每一個圖標的基本結構爲：

<a href="#" class="btn-box">
    <span class="icon-chevron-left"></span>
</a>

其中，.btn-box是定義<a>標籤的基本設置，大小爲40x40，因爲我這裏默認將圖標放在一個<a>標籤裏面以實現按鈕效果，若是不須要<a>標籤的話能夠換成別的（例如div），可是.btn-box必須帶上，由於裏面的<span>的定位是相對於父元素的。

.btn-box的基本樣式爲：

.btn-box{
    display: inline-block;
    width: 40px;
    height: 40px;
    text-decoration: none;
    position: relative;
}

接下來說一下<span>標籤，該標籤只須要添加一個類名就好了，該類名的選擇就是上圖中72個圖標樣式類名中的一個。每一個類名實現一個圖標效果，依據圖標效果的實現過程會不固定地使用到：before和：after這兩個僞元素來輔助實現所需的圖標效果。固然，使用CSS3在某些圖標的實現上仍是很難達到矢量圖標或者圖標字體那麼完美，這方面多是我學術尚淺以至目前沒法自我解決。另外，在這72個圖標中，有幾個圖標是有白色遮罩的，分別是：

1.移動圖標：此圖標中間的白色小正方形是白色遮罩。

2.相機圖標：此圖標中間白色圓圈是白色遮罩。

3.手機圖標：此圖標頂部和尾部的小矩形和小圓圈是白色遮罩。

4.標籤圖標：此圖標中的小圓圈是白色遮罩。

5.網格圖標：此圖標中間的白色線條是白色遮罩。

6.開關機圖標：此圖標圓圈頂部的缺口是白色遮罩。

7.刷新圖標：此圖標右邊的缺口是白色遮罩。

PS：說明一下：所謂白色遮罩就是當沒法使用CSS規則來達到某種效果時，採用僞元素做爲白色遮罩以完成所需的圖標效果，因此使用時須要結合實際狀況修改遮罩顏色，以達到和背景色融合。固然，相機，手機和標籤圖標的遮罩部分不改動也不影響葉敏啊美觀。除此以外，其餘圖標都是能夠放心使用，若遇到須要根據實際狀況改變圖標大小的，能夠自行修改，不過我在各類主流分辨率下測試過，基本上不會影響使用。

因爲圖標數量不少，我就選取一些圖標的代碼進行分享，其餘的能夠到我提供的github地址下載哦：

<a href="#" class="btn-box">
    <span class="icon-music"></span>
</a>

.icon-music{
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 3px 3px 0 0;
    border-top:7px solid #333;
    border-left:3px solid #333;
    border-right:3px solid #333;
    position: absolute;
    top:6px;
    left:11px;
    -webkit-transform: skewY(-15deg);
}
.icon-music:before,.icon-music:after{
    content: '';
    display: inline-block;
    width: 10px;
    height: 7px;
    background: #333;
    border-radius: 10px/7px;
    position: absolute;
    -webkit-transform: rotate(15deg);
}
.icon-music:before{
    top:14px;
    left:-10px;
}
.icon-music:after{
    top:14px;
    left:11px;
}

<a href="#" class="btn-box">
    <span class="icon-refresh"></span>
</a>

.icon-refresh{
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border:4px solid #333;
    position:absolute;
    top:6px;
    left:6px;
}
.icon-refresh:before{
    content: '';
    display: inline-block;
    width: 6px;
    height: 10px;
    background: #fff;
    position:absolute;
    top:4px;
    right:-4px;
}
.icon-refresh:after{
    content: '';
    display: inline-block;
    width: 0px;
    height: 0px;
    border-left:6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #333;
    position:absolute;
    top:1px;
    left:14.5px;
    -webkit-transform: rotate(-45deg);
}

<a href="#" class="btn-box">
    <span class="icon-heart"></span>
</a>

.icon-heart,.icon-heart:before{
    display: inline-block;
    width: 20px;
    height: 30px;
    border-radius: 10px;
    background: #333;
    position: absolute;
    top:-10px;
    left:12.7px;
    -webkit-transform-origin: bottom right;
    -webkit-transform: rotate(-45deg);
}
.icon-heart:before{
    content: '';
    -webkit-transform-origin: bottom left;
    -webkit-transform: rotate(90deg);
    top:-18px;
    left:2px;
}
.icon-heart:after{
    content: '';
    width: 0;
    height: 0;
    border-left:10.8px solid transparent;
    border-right:10.8px solid transparent;
    border-top:12px solid #333;
    -webkit-transform: rotate(45deg);
    position: absolute;
    top:22.5px;
    left:-7.3px;
}

<a href="#" class="btn-box">
    <span class="icon-star"></span>
</a>

.icon-star,.icon-star:before,.icon-star:after{
    display: inline-block;
    width: 0;
    height: 0;
    border-top:20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 14px solid #333;
    -webkit-transform: rotate(18deg);
    position: absolute;
    left:13.5px;
    top:2px;
}
.icon-star:before{
    content: '';
    top:-19.2px;
    left:-14.5px;
    -webkit-transform: rotate(72deg);
}
.icon-star:after{
    content: '';
    top:-19.8px;
    left:-15.5px;
    -webkit-transform: rotate(145deg);
}

<a href="#" class="btn-box">
    <span class="icon-user"></span>
</a>

.icon-user{
    display: inline-block;
    width: 14px;
    height: 18px;
    background: #333;
    border-radius: 7px 7px 5px 5px;
    position: absolute;
    top:5px;
    left:13px;
}
.icon-user:before{
    content: '';
    display: inline-block;
    width: 8px;
    height: 10px;
    background: #333;
    position: absolute;top:17px;left:3px;
}
.icon-user:after{
    content: '';
    display: inline-block;
    width: 0px;
    height: 0px;
    border-left:20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 12px solid #333;
    border-radius: 50%;
    position: absolute;top:18px;left:-13px;
}

<a href="#" class="btn-box">
    <span class="icon-screenshot"></span>
</a>

.icon-screenshot{
    display: inline-block;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    border:3px solid #333;
    position: absolute;
    top:8.5px;
    left:8.5px;
}
.icon-screenshot:before,.icon-screenshot:after{
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    border-left:15px solid #333;
    border-right:15px solid #333;
    position: absolute;
    top:6px;
    left:-9px;
}
.icon-screenshot:after{
    -webkit-transform:rotate(90deg);
}

<a href="#" class="btn-box">
    <span class="icon-move"></span>
</a>

.icon-move{
    display: inline-block;
    width: 26px;
    height: 26px;
    background: #333;
    position: absolute;
    top:7px;
    left:7px;
    -webkit-transform: rotate(45deg);
}
.icon-move:after,.icon-move:before{
    content: '';
    display: inline-block;
    width: 4px;
    height: 8px;
    border-left: 8px solid #fff;
    border-right: 8px solid #fff;
    position: absolute;
    top:5px;
    left:-1px;
    -webkit-transform: rotate(-45deg);
}
.icon-move:after{
    -webkit-transform: rotate(-45deg) translateY(12px);
}

OK，其餘圖標詳見個人github之css3-icon：https://github.com/JR93/css3-icon

 

最後，轉載請註明出處，謝謝！