《css大法》之使用僞元素實現超實用的圖標庫（附源碼）

今天咱們來複盤一下前端中css僞元素的知識以及如何用css僞元素來減輕javascript的壓力，作出一些腦洞大開的圖形。

預備知識

僞元素

僞元素是一個附加至選擇器末的關鍵詞，容許你對被選擇元素的特定部分修改樣式。僞元素主要有：

• ::first-letter 第一個字母的樣式
• ::first-line 首行文字的樣式
• ::before 元素頭部添加的修飾
• ::after 元素尾部添加的修飾
• ::placeholder input的佔位符樣式
• ::selection 被選中元素的樣式

我我的以爲僞元素能夠解釋爲元素的修飾，能夠爲元素帶來額外的附加樣式，屬於額外的文檔結構。

僞類

用來表示沒法在CSS中輕鬆或者可靠檢測到的某個元素的狀態或屬性，好比a標籤的hover表示鼠標通過的樣式，visited表示訪問過的連接的樣式，更多的用來描述元素狀態變化時的樣式，僞類主要有：

• :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僞類和僞元素能夠實現不少強大的視覺效果，這裏我主要介紹僞元素，若是對僞類或其餘css特性感興趣，能夠看看我以前的css文章，寫的很全面：

用css3實現驚豔面試官的背景即背景動畫（高級附源碼）

css3實戰彙總（附源碼）

正文

先看看咱們用純css實現的圖標庫：

固然，若是咱們知道了作出如上圖標的css原理，那麼咱們就能夠實現更加豐富複雜的圖形，甚至能夠打造本身的圖標庫。

接下來我會介紹實現如上圖標的方式和方法，並給出部分源碼，方便你們學習。

原理

咱們實現如上css圖標是基於僞元素的，能夠利用僞元素的::before和::after和content屬性來爲元素添加額外視覺效果，咱們在上文中也介紹了僞元素的概念和類型，接下來讓咱們來實現它吧～

實現箭頭

思路其實就是利用元素的::before僞元素畫一個三角形，用css設置span樣式爲一條線並進行佈局定位：

// 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>
複製代碼

這樣就實現了一個指向右的箭頭，咱們用相似的方法也能夠實現左箭頭，上下箭頭，實現雙向箭頭只須要加一個::after僞類並作適當定位就行了。

實現搜索圖標

實現搜索圖標實際上只須要一個圓和一根線，而後咱們會用transform：ratate來實現角度傾斜，具體實現以下：

// 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>
複製代碼

實現頭像

實現頭像咱們要利用before和after僞元素，分別作人物頭部和身體，身體咱們會用css畫一個橢圓來作：

// 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>
複製代碼

實現地點圖標

地點圖標由一個圓和一個三角形組成，若是要作的精緻一點，咱們能夠再用一個僞元素來作一個定點：

// 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>
複製代碼

實現微信圖標

圖中2個眼睛主要是用到一個僞元素加上box-shadow來實現，這樣能夠節約一個僞元素用來作小尾巴，至於如何實現不一樣形狀的三角形，若是有不懂的能夠和我交流，具體實現以下：

// 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>
複製代碼

實現對勾圖標

這裏也很簡單，咱們用僞元素的content裏放置一個勾號，而後設置顏色大小就好啦：

// 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>
複製代碼

實現眼睛（通常用於網站訪問量圖標）

主要是作橢圓加上一個圓形的僞元素：

.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;
    }
}
複製代碼

導航圖標

原理相似，主要思想是畫兩個三較形，用僞元素的三角形遮住主元素底部便可：

.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;
    }
}
複製代碼

實現心形圖標

原理就是用兩個僞元素實現兩個橢圓，旋轉重合便可：

.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圖標

這個也是用僞元素，一個僞元素用來作文字圖形，一個用來作遮罩，來造成僞立體感：

.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;
    }
}
複製代碼

實現氣泡對話框

和微信圖標相似：

.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);
    }
}
複製代碼

因爲篇幅緣由，其餘的圖標就不一一實現了，原理都相似，筆者以前曾利用這個方案作過一套100個圖標的庫，成功應用於各個項目中，因爲體積小不會形成額外請求，因此更加實用，但更復雜的圖形就爲了方便仍是建議用字體圖標或者svg，base64等。

最後

若是想了解更多css，javascript，nodeJS等前端知識和實戰，歡迎在公衆號《趣談前端》加入咱們一塊兒學習討論，共同探索前端的邊界。

更多推薦

• 快速掌握es6+新特性及es6核心語法盤點
• 基於nodeJS從0到1實現一個CMS全棧項目（上）
• 基於nodeJS從0到1實現一個CMS全棧項目（中）
• 基於nodeJS從0到1實現一個CMS全棧項目（下）
• 基於nodeJS從0到1實現一個CMS全棧項目的服務端啓動細節
• 《javascript高級程序設計》核心知識總結
• 用css3實現驚豔面試官的背景即背景動畫（高級附源碼）
• 記一次老項目中的跨頁面通訊問題和前端實現文件下載功能
• 5分鐘教你用nodeJS手寫一個mock數據服務器
• JavaScript 中的二叉樹以及二叉搜索樹的實現及應用
• 用 JavaScript 和 C3 實現一個轉盤小遊戲
• 教你用200行代碼寫一個愛豆拼拼樂H5小遊戲（附源碼）
• 基於react/vue生態的前端集成解決方案探索與總結
• 如何用不到200行代碼寫一款屬於本身的js類庫)
• 一張圖教你快速玩轉vue-cli3
• 3分鐘教你用原生js實現具備進度監聽的文件上傳預覽組件
• 使用Angular8和百度地圖api開發《旅遊清單》
• js基本搜索算法實現與170萬條數據下的性能測試
• 《前端算法系列》如何讓前端代碼速度提升60倍
• vue高級進階系列——用typescript玩轉vue和vuex