使用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

 

最后，轉載請注明出處，謝謝！