87
純CSS3實現支持自定義設定的圖標
網上有各種用CSS3畫圖標，畫漫畫的代碼，實在是有點吊！如果能為自己的網站也繪製一套CSS3圖標，那麼就省去了用小圖片的力氣。雖然說各大瀏覽器對CSS3的支持性還不盡相同，但是大勢所趨，寫寫更健康。
首先，我們要做到使用簡單，簡單到給元素加個類就能使用圖標，然後我們還要支持可定製，比如顏色，大小。看下麵的代碼：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>CSS3 ICONS</title> </head> <body> <div > <a href="#"></a> </div> </body> </html>我們隻要給a標簽加上兩個類就可以讓它變成一個圖標。之所以加兩個，是因為類css3-icon實現的圖標的基本樣式，而css3-icon-search則實現了具體的search圖標樣式：
/*global icon style*/
.css3-icon{
position:relative;
display:block;
/*custom the icon size*/
width:100px;height:100px;font-size:10px;
background:#ccc;
}
.css3-icon:before,.css3-icon:after{content:"";position:absolute;left:0;background:transparent;font-size:1em;}
偽元素肯定是要用上的，而且要相對於.css3-icon絕對定位。我們希望圖標的大小是可以自定義的，所以在:before和:after偽元素裏我們使用了相對單位em，為此要在.css3-icon中對font-size重新賦初始值。
接下來我們畫一個search圖標：
/*---------------------
search icon
----------------------*/
.css3-icon-search:after {
left:55%;top:70%;
width:40%;height:12%;
background:#456;
transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);
}
.css3-icon-search:before {
left:10%;top:5%;
width:50%;height:50%;
border:.9em solid #456;
border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;--o-border-radius:50%;
}
.css3-icon-search:hover:before{
border-color:#ff7;
}
.css3-icon-search:hover:after{
background:#ff7;
}在before偽元素中，利用border-radiuis畫一個圓，在after偽元素中，利用transform畫出放大鏡的手柄。為了支持圖標縮放，這裏都使用了百分比，效果如下：
要修改大小的話隻要改變.css3-icon中的width，height，font-size即可（需要等比例改變大小）。但是還有一個問題，目前不支持自定義顏色。我們還需要改進代碼，在.css-icon中設置顏色，具體圖標的顏色則采用繼承的方式：
/*--------------------------------------
pure css icons
author:liquanfeng
created:2014/9/4
version:1.0
blog:https://readit.sinaapp.com
---------------------------------------*/
/*global icon style*/
.css3-icon{
position:relative;
display:block;
/*custom the icon size*/
width:100px;height:100px;font-size:10px;
background:#ccc;
border-color:#456;
}
.css3-icon:hover:before,.css3-icon:hover:after{
border-color:#ff7;/*custom your hover effect*/
}
.css3-icon:focus:before,.css3-icon:focus:after{
border-color:#ff7;/*custom your focus effect*/
}
.css3-icon:active:before,.css3-icon:active:after{
border-color:#ff7;/*custom your active effect*/
}
.css3-icon:visited:before,.css3-icon:visited:after{
border-color:#ff7;/*custom your visited effect*/
}
.css3-icon:before,.css3-icon:after{
content:"";
position:absolute;left:0;
background:transparent;
font-size:1em;
}
/*global icon style end*/
/*---------------------
search icon
----------------------*/
.css3-icon-search:before {
left:10%;top:5%;
width:50%;height:50%;
border:.9em solid;
border-color:inherit;
border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;--o-border-radius:50%;
}
.css3-icon-search:after {
left:55%;top:70%;
width:40%;height:0;
border-top:.9em solid;
border-color:inherit;
transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);
}
以上就是所有代碼了，其他的圖標都可以按這個框架來實現，利用旋轉和border特性來畫圖標，然後在global style裏麵自定義尺寸和顏色就ok了。
以上寫的代碼還是有問題的，就是在.css3-icon裏麵設置了font-size:10px;本來這樣做是為了方便後麵使用em單位，但是沒有考慮到Chrome不支持12px以下的字體，為了保證兼容性又方便計算，最好是設置font-size:100px;後麵再使用em單位時直接除以10就行了，相當於0.01em=1px。
這樣一來，.css3-icon中的width，height，font-size值都是100px了，使用時用JS腳本可以很方便的修改。而且font-size最小可到12px，就是說width，height最小值也是12px，12x12的圖標，相當於小字體的高度了，完全可以適用於各種場合~
最後，根據修改後的方案，再來畫一個太極圖標，效果如下：
下麵是html代碼和CSS代碼：
<a href="#"></a>
.css3-icon-taiji{
border-radius:50%;
background:-moz-linear-gradient(center left, #fff, #fff 50%, black 50%, black);
background:-webkit-gradient(linear, left center, right center, from(#fff), color-stop(50%,#fff), color-stop(50%, black), to(black));
background:-o-linear-gradient(left, #fff, #fff 50%, black 50%, black);
}
.css3-icon-taiji:before{
width:20%;height:20%;
border-radius:50%;
left:40%;top:15%;
background:#000;
box-shadow:0 0 0 .15em #fff;
}
.css3-icon-taiji:after{
width:20%;height:20%;
border-radius:50%;
left:40%;bottom:15%;
background:#fff;
box-shadow:0 0 0 .15em #000;
}
.css3-icon-taiji:hover{
-webkit-animation:taiji-animation 4s infinite linear;
}
@-webkit-keyframes taiji-animation{
0%{
-webkit-transform: rotate(0deg);
}
50%{
-webkit-transform: rotate(180deg);
}
100%{
-webkit-transform: rotate(360deg);
}
}
我給他加上了一個hover旋轉動畫，酷炫的太極！
最後更新：2017-04-03 05:40:12