前端:使用純css實(shí)現(xiàn)超實(shí)用的圖標(biāo)庫(kù)（附源碼)
今天我們來(lái)復(fù)盤(pán)一下前端中css偽元素的知識(shí)以及如何用css偽元素來(lái)減輕javascript的壓力，做出一些腦洞大開(kāi)的圖形。
預(yù)備知識(shí)
偽元素
偽元素是一個(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ū)傩?，比如a標(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文章，寫(xiě)的很全面。
正文
先看看我們用純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í)現(xiàn)箭頭
思路其實(shí)就是利用元素的::before偽元素畫(huà)一個(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
- <span class="arrow arrow-hor right"></span>
這樣就實(shí)現(xiàn)了一個(gè)指向右的箭頭，我們用類似的方法也可以實(shí)現(xiàn)左箭頭，上下箭頭，實(shí)現(xiàn)雙向箭頭只需要加一個(gè)::after偽類并做適當(dāng)定位就好了。
實(shí)現(xiàn)搜索圖標(biāo)
實(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
- <span class="search"></span>
實(shí)現(xiàn)頭像
實(shí)現(xiàn)頭像我們要利用before和after偽元素，分別做人物頭部和身體，身體我們會(huì)用css畫(huà)一個(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
- <span class="search"></span>
實(shí)現(xiàn)地點(diǎn)圖標(biāo)
地點(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
- <span class="locate-icon mr-20"></span>
實(shí)現(xiàn)微信圖標(biāo)
圖中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
- <span class="wechat-icon mr-20"></span>
實(shí)現(xiàn)對(duì)勾圖標(biāo)
這里也很簡(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
- <span class="yes-icon mr-20"></span>
實(shí)現(xiàn)眼睛(一般用于網(wǎng)站訪問(wèn)量圖標(biāo))
主要是做橢圓加上一個(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;
- }
- }
導(dǎo)航圖標(biāo)
原理類似，主要思想是畫(huà)兩個(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;
- }
- }
實(shí)現(xiàn)心形圖標(biāo)
原理就是用兩個(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);
- }
- }
ps圖標(biāo)
這個(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;
- }
- }
實(shí)現(xiàn)氣泡對(duì)話框
和微信圖標(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等。
