整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
沒出現css動畫效果之前要實現動的圖標，一般都是插入一張gif的圖片去實現，隨著CSS3技術的流行，現在越來越多比較高級炫酷的網頁效果呈現，今天用css代碼實現一組天氣網站常用到的圖標！
如下：
預覽起來是可以動起來的，這里只截靜態圖片！
實現方法
html結構：
css樣式：
在進行前端開發時，圖標庫的使用是一項必須掌握的技巧，目前流行的圖標庫有fontawesome，iconfont等，只需要引入到項目中，然后使用對應的class，就會得到對應的圖標。
但是你們有沒有想過，如果是自己的話該怎么去實現這些圖標呢？今天我們就來看看一些稍微復雜的圖標是如何使用純CSS3實現吧。
文中的代碼已經放到github上了，感興趣的同學自取。
https://github.com/zhouxiongking/article-pages/blob/master/articles/border/complexFigure.html
CSS3
我們可以先來看看稍微復雜的圖標的樣子。
圖標庫
從圖標中可以看出，都是平時很常用的正確，錯誤，方向鍵，放大，縮小，開鎖，解鎖等。
我們從中抽取幾個，慢慢分析它們是如何實現的吧。
水杯的圖標如下所示。
水杯圖標
我們對水杯圖標進行拆分，分為杯身和杯柄兩個部分。
杯身中的白色長方形就是一個div，設置寬度和高度。
杯身的四周為黑色都是通過border實現，border-bottom比其他三個放向都要大。
杯身的下方是圓角，通過border-radius設置，border-radius的右下和左下方向設置相同的值。
通過上述的分析，我們可以得到杯身部分的CSS代碼。
杯身CSS代碼
杯柄通過偽元素:before實現。
杯柄設置為絕對定位，修改right值讓中間出現一個空白。
調整杯柄位置的寬度，只需要和杯身重疊即可。
杯柄右上角和右下角的border-radius設置為特定的值，展現成圓角的樣子。
通過以上的分析，我們可以得到杯柄部分的CSS代碼。
杯柄CSS代碼
首先我們來看看心形圖案的樣子。
心形圖案
接下來我們同樣將整個圖案拆分來看，分成左右兩個部分，我們將上述圖案換成兩種不同顏色就一目了然了。
拆分圖案
從圖案中可以看出，它實際是由兩個相同的圖行旋轉不同的角度構成，相同的元素部分，可以通過設置border-radius值來實現。
我們將左右兩個半邊的形狀分別通過:before和:after來實現，原始的的div形狀的CSS屬性則很簡單，只需要設置相對位置和寬度為0即可。
基本CSS屬性
然后看看:before和:after共有的屬性，主要是保證為元素部分的定位為絕對定位，然后設置border-radius的值， 保證上半部分是圓角。
共有CSS屬性
然后是關鍵的兩半邊各自的CSS屬性。左側的圖形距左邊應該為0，所以left: 0，右側的圖形距右側為0，所以right: 0。
各有的CSS屬性
同時左右兩側圖案需要進行旋轉，這里我們選擇旋轉48度，這是為什么呢？
很多人一下子可能會想到旋轉45度，我們來看看旋轉45度時的樣子。
旋轉45度
從圖形中可以看出，兩側有棱角，整個圖案就顯得不標準，當旋轉超過45度時，棱角的部分就會被里面的圖案遮住。
所以這里我們選擇旋轉48度，達到最終的效果。
最終效果圖
今天這篇文章我們使用純CSS3的屬性畫出了一個杯子和心形兩個稍微復雜點的圖案，其實其它圖案也是類似的，只要我們能將其拆分，每個部分獨立實現，再組合就可以達到圖標庫的效果了。
大家也可以自己動手實現一下噢~
、需求展示
如圖所示，圖中網站的購物車小圖標漂亮簡約，如何簡單快速實現呢？
網站中購物車小圖標
二、實戰演武
（一）字體圖標準備
提前前往字體圖標網站下載好字體圖標文件（iconfont），并存放在項目文件中
字體圖標文件目錄
（二）代碼準備
以下為提前準備好的頂部導航欄代碼，分為左右兩部分，其中右邊的購物車欄目前需要添加購物車圖標
準備代碼
代碼運行預覽
（三）引入字體圖標樣式
在<head>標簽中用<link>標簽引入字體圖標文件中的iconfont.css文件
引入字體圖標樣式
（四）書寫存放字體圖標的HTML代碼
1、在存放購物車的a標簽之前添加同級標簽——i標簽，并將i標簽的類名定義為.iconfont
添加同級標簽—i標簽
2、添加圖標對應類名
用谷歌瀏覽器打開iconfont文件夾中的demo_index.html文件，切換到Font class選項下，找到心儀的購物車圖標，復制圖標下的類名（.icon-gouwuchefill）到標簽類中
iconfont文件目錄
圖標的類名
添加圖標對應類名
可以看到購物車之前已經成功添加了小圖標，但是顏色和大小還不符合要求
運行代碼結果
（六）設置字體圖標的樣式
字體圖標可以像文字一樣設置其大小，顏色等樣式，設置屬性和文字一樣。
文中給字體圖標設置了大小12像素，紅色
設置字體圖標的樣式
代碼運行結果
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
