一、字體圖標
1.iconfont矢量圖標的網(wǎng)址（https://www.iconfont.cn/）
2.網(wǎng)頁字體圖標是需要用"link"引入iconfont.css文件才能生效
3.1使用字體圖標的步驟（unicode寫法）：
-
先引入字體圖標文件
引入字體圖標.png -
通過i標簽(大部分情況下都是i標簽承接字體圖標)把unicode編碼復(fù)制過來
unicode編碼.png -
聲明字體圖標庫
聲明圖標庫.png
3.2
-
引入iconfont.css文件
引入字體圖標.png 通過標簽承接字體圖標
類名：
第一個類名是固定的：iconfont;
第二個類名：通過demo_index.html文件或者項目主頁面，直接去復(fù)制文字下方的類名即可
注意： 這個引用字體圖標的方式不能用標簽名去改變屬性，不能生效，iconfont的權(quán)重比標簽的權(quán)重高，最好是自己起一個類名來使用修改樣式，否則用到相同的字體圖標的時候，會導(dǎo)致繼承的效果，若是需要每個都不一樣，就只有通過自己重新起類名來修改其中的樣式了
3.3
-
先引入字體圖標文件
引入字體圖標.png -
在content內(nèi)容中，填充該字體圖標的unicode編碼，然后把前三個字符和后面的分號去掉，在最前面添加“\”
\作用：編譯
偽類使用字體圖標的方式.png
3.4 在線引入
注意：在線引入想當于引入了字體圖標文件，其使用方法還是跟類名的使用方法相同的
二、平面轉(zhuǎn)換（transform）
-
平移：translate
平移：translateX、translateY、這兩個是對于x軸和y軸的位置進行平移的，對象的對象是針對于那些需要平移的盒子而設(shè)定的，其效果是瞬間的。
想要看到其效果是要添加過渡（transition），設(shè)置相應(yīng)的動作的時長，同時需要搭配（hover）偽元素才能有相應(yīng)的動作的。
單位：px/像素
transtion()：當只有一個值的時候，默認是X軸的正方向（向右是正方向，向下是正方向；反之為負值）
單位：%
對應(yīng)的是實現(xiàn)該效果的盒子值，參照的是自身盒子的尺寸
特點：
1.transform屬性對于行內(nèi)元素是無效的
2.添加了transform屬性的盒子可以提高盒子層級，保留原來的位置----類似于相對定位的特點
transform.png -
旋轉(zhuǎn)（rotate）
旋轉(zhuǎn).png
單位：deg
正值是順時針
負值是逆時針 -
縮放（scale）
transform三要素.png
注意點：
transform注意點.png -
子盒子在父盒子內(nèi)部居中的案例
子盒子在父盒子內(nèi)部居中的效果.png -
轉(zhuǎn)換原點
轉(zhuǎn)換的參考原點.png
意思就是選擇某個點作為參照點（多半用于旋轉(zhuǎn)的作用）
三、 漸變
漸變.png
- 效果默認是水平向右的漸變方向
- to 方位名詞,color1,color2會默認向設(shè)置的那個方向漸變
- 角度（deg）也會從設(shè)置的那個角度去漸變
- 獲取漸變色彩的鏈接（https://uigradients.com/#KyooTah）
