這篇文章將為大家詳細(xì)講解有關(guān)怎么使用純css實(shí)現(xiàn)超實(shí)用的圖標(biāo)庫(kù)，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。
作為一家“創(chuàng)意+整合+營(yíng)銷”的成都網(wǎng)站建設(shè)機(jī)構(gòu)，我們?cè)跇I(yè)內(nèi)良好的客戶口碑。成都創(chuàng)新互聯(lián)提供從前期的網(wǎng)站品牌分析策劃、網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、網(wǎng)站制作、創(chuàng)意表現(xiàn)、網(wǎng)頁(yè)制作、系統(tǒng)開(kāi)發(fā)以及后續(xù)網(wǎng)站營(yíng)銷運(yùn)營(yíng)等一系列服務(wù)，幫助企業(yè)打造創(chuàng)新的互聯(lián)網(wǎng)品牌經(jīng)營(yíng)模式與有效的網(wǎng)絡(luò)營(yíng)銷方法,創(chuàng)造更大的價(jià)值。
偽元素是一個(gè)附加至選擇器末的關(guān)鍵詞，允許你對(duì)被選擇元素的特定部分修改樣式。偽元素主要有：
::first-letter 第一個(gè)字母的樣式
::first-line 首行文字的樣式
::before 元素頭部添加的修飾
::after 元素尾部添加的修飾
::placeholder input的占位符樣式
::selection 被選中元素的樣式
我個(gè)人覺(jué)得偽元素可以解釋為元素的修飾，可以為元素帶來(lái)額外的附加樣式，屬于額外的文檔結(jié)構(gòu)。
用來(lái)表示無(wú)法在CSS中輕松或者可靠檢測(cè)到的某個(gè)元素的狀態(tài)或?qū)傩裕热鏰標(biāo)簽的hover表示鼠標(biāo)經(jīng)過(guò)的樣式，visited表示訪問(wèn)過(guò)的鏈接的樣式，更多的用來(lái)描述元素狀態(tài)變化時(shí)的樣式，偽類主要有：
:link
:visited
:hover
:active
:focus
:lang(fr)
:not(s)
:root
:first-child
:last-child
:only-child
:nth-child(n)
:nth-last-child(n)
:first-of-type
:last-of-type
:only-of-type
:nth-of-type(n)
:nth-last-of-type(n)
:empty
:checked
:enabled
:disabled
:target
我們利用css偽類和偽元素可以實(shí)現(xiàn)很多強(qiáng)大的視覺(jué)效果，這里我主要介紹偽元素，如果對(duì)偽類或其他css特性感興趣，可以看看我之前的css文章，寫的很全面。
先看看我們用純css實(shí)現(xiàn)的圖標(biāo)庫(kù)：
當(dāng)然，如果我們知道了做出如上圖標(biāo)的css原理，那么我們就可以實(shí)現(xiàn)更加豐富復(fù)雜的圖形，甚至可以打造自己的圖標(biāo)庫(kù)。接下來(lái)我會(huì)介紹實(shí)現(xiàn)如上圖標(biāo)的方式和方法，并給出部分源碼，方便大家學(xué)習(xí)。
我們實(shí)現(xiàn)如上css圖標(biāo)是基于偽元素的，可以利用偽元素的::before和::after和content屬性來(lái)為元素添加額外視覺(jué)效果，我們?cè)谏衔闹幸步榻B了偽元素的概念和類型，接下來(lái)讓我們來(lái)實(shí)現(xiàn)它吧～
思路其實(shí)就是利用元素的::before偽元素畫一個(gè)三角形，用css設(shè)置span樣式為一條線并進(jìn)行布局定位：
重慶分公司
重慶分公司
// less .arrow { position: relative; display: inline-block; line-height: 0; background-color: #ccc; &.arrow-hor { width: 16px; height: 1px; } &.arrow-hor.right::before { content: ''; position: absolute; top: -4px; right: -8px; border: 4px solid transparent; border-left: 4px solid #ccc; } } // html 這樣就實(shí)現(xiàn)了一個(gè)指向右的箭頭，我們用類似的方法也可以實(shí)現(xiàn)左箭頭，上下箭頭，實(shí)現(xiàn)雙向箭頭只需要加一個(gè)::after偽類并做適當(dāng)定位就好了。
實(shí)現(xiàn)搜索圖標(biāo)實(shí)際上只需要一個(gè)圓和一根線，然后我們會(huì)用transform：ratate來(lái)實(shí)現(xiàn)角度傾斜，具體實(shí)現(xiàn)如下：
// less .search { position: relative; display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 1px solid #ccc; text-align: center; transform: rotate(-45deg); &::after { content: ''; display: inline-block; width: 1px; height: 4px; background-color: #ccc; } } // html 實(shí)現(xiàn)頭像
實(shí)現(xiàn)頭像我們要利用before和after偽元素，分別做人物頭部和身體，身體我們會(huì)用css畫一個(gè)橢圓來(lái)做：
// less .dot-pan { position: relative; display: inline-flex; width: 60px; height: 60px; line-height: 0; align-items: center; border-radius: 50%; background-color: #06c; transform: rotate(-90deg); &::before { content: ''; display: inline-block; width: 28px; height: 40px; margin-left: -3px; border-radius: 50% 50%; flex-shrink: 0; background-color: #fff; } &::after { content: ''; display: inline-block; width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%; background-color: #fff; } } // html 
地點(diǎn)圖標(biāo)由一個(gè)圓和一個(gè)三角形組成，如果要做的精致一點(diǎn)，我們可以再用一個(gè)偽元素來(lái)做一個(gè)定點(diǎn)：
// less .locate-icon { position: relative; display: inline-block; width: 50px; height: 50px; border-radius: 50%; background-color: #06c; &::before { content: ''; position: absolute; display: inline-block; width: 12px; height: 12px; border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%, -50%); background-color: #fff; } &::after { content: ''; margin-top: 45px; display: inline-block; border: 15px solid transparent; border-top-color: #06c; } } // html 
圖中2個(gè)眼睛主要是用到一個(gè)偽元素加上box-shadow來(lái)實(shí)現(xiàn)，這樣可以節(jié)約一個(gè)偽元素用來(lái)做小尾巴，至于如何實(shí)現(xiàn)不同形狀的三角形，如果有不懂的可以和我交流，具體實(shí)現(xiàn)如下：
// less .wechat-icon { display: inline-block; width: 50px; height: 50px; border-radius: 50%; background-color: rgb(68, 170, 59); &::before { content: ''; margin-top: 14px; position: absolute; width: 4px; height: 4px; border-radius: 50%; background-color: #fff; box-shadow: 16px 0 0 #fff; } &::after { content: ''; margin-top: 42px; display: inline-block; border-width: 6px 10px 6px 10px; border-style: solid; border-color: transparent; border-top-color: rgb(68, 170, 59); transform: rotate(-147deg); } } // html 
這里也很簡(jiǎn)單，我們用偽元素的content里放置一個(gè)勾號(hào)，然后設(shè)置顏色大小就好啦：
// less .yes-icon { display: inline-flex; justify-content: center; align-items: center; width: 48px; height: 48px; background-color: green; border-radius: 50%; &::after { content: '?'; color: #fff; font-size: 30px; font-weight: bold; } } // html 
主要是做橢圓加上一個(gè)圓形的偽元素：
.view-icon { display: inline-flex; justify-content: center; align-items: center; width: 58px; height: 36px; background-color: #06c; border-radius: 50%; &::after { content: ''; display: inline-block; width: 20px; height: 20px; border-radius: 50%; background-color: #fff; } }
原理類似，主要思想是畫兩個(gè)三較形，用偽元素的三角形遮住主元素底部即可：
.gps-icon { position: relative; display: inline-flex; justify-content: center; align-items: center; border-width: 30px 15px 30px 15px; border-color: transparent; border-style: solid; border-bottom-color: #06c; transform: translate(10px, -16px) rotate(32deg); &::after { position: absolute; bottom: -48px; content: ''; display: inline-block; border-width: 10px 38px 30px 38px; border-color: transparent; border-style: solid; border-bottom-color: #fff; } }
原理就是用兩個(gè)偽元素實(shí)現(xiàn)兩個(gè)橢圓，旋轉(zhuǎn)重合即可：
.logo-x { position: relative; display: inline-flex; width: 50px; height: 50px; border-radius: 50%; background-color: rgb(212, 73, 17); &::after { position: absolute; content: ''; left: 10px; top: 12px; display: inline-block; width: 20px; height: 30px; border-radius: 50%; background-color: #fff; transform: rotate(135deg); } &::before { position: absolute; content: ''; right: 10px; top: 12px; display: inline-block; width: 20px; height: 30px; border-radius: 50%; background-color: #fff; transform: rotate(-135deg); } }
這個(gè)也是用偽元素，一個(gè)偽元素用來(lái)做文字圖形，一個(gè)用來(lái)做遮罩，來(lái)形成偽立體感：
.logo-ps { position: relative; display: inline-flex; justify-content: center; align-items: center; width: 50px; height: 50px; border-radius: 8px; background-color: rgb(15, 102, 184); &::before { position: absolute; content: ''; display: inline-block; width: 50px; height: 40px; background-color: rgba(255, 255, 255, .1); } &::after { position: absolute; content: 'PS'; font-size: 24px; display: inline-block; color: #fff; } }
和微信圖標(biāo)類似：
.logo-pp { display: inline-block; width: 150px; height: 50px; border-radius: 8px; background-color: rgb(68, 170, 59); &::before { content: '等你下課哦！'; margin-top: 14px; margin-left: -33px; position: absolute; color: #fff; } &::after { content: ''; margin-top: 42px; display: inline-block; border-width: 6px 10px 6px 10px; border-style: solid; border-color: transparent; border-top-color: rgb(68, 170, 59); transform: rotate(-147deg) translate(-12px, 6px); } }由于篇幅原因，其他的圖標(biāo)就不一一實(shí)現(xiàn)了，原理都類似，筆者之前曾利用這個(gè)方案做過(guò)一套100個(gè)圖標(biāo)的庫(kù)，成功應(yīng)用于各個(gè)項(xiàng)目中，由于體積小不會(huì)造成額外請(qǐng)求，所以更加實(shí)用，但更復(fù)雜的圖形就為了方便還是建議用字體圖標(biāo)或者svg，base64等。
關(guān)于“怎么使用純css實(shí)現(xiàn)超實(shí)用的圖標(biāo)庫(kù)”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。
