字體圖標
字體圖標展示的是圖標，本質(zhì)是字體一汽。處理簡單的避消、顏色單一的圖片。
字體圖標的優(yōu)點：
靈活性：靈活地修改樣式召夹，例如：尺寸岩喷、顏色等
輕量級：體積小、渲染快戳鹅、降低服務器請求次數(shù)
兼容性：幾乎兼容所有主流瀏覽器
使用方便：
1. 下載字體包
2. 使用字體圖標
圖標庫
Iconfont：https://www.iconfont.cn/
下載字體包：
登錄（新浪微博） → 選擇圖標庫 → 選擇圖標均驶，加入購物車 → 購物車 → 添加至項目 → 下載至本地
使用字體圖標 - Unicode編碼：
引入樣式表：iconfont.css
復制粘貼圖標對應的Unicode編碼
設(shè)置文字字體
上傳矢量圖：
l 思考：如果圖標庫沒有項目所需的圖標怎么辦？
l 答：IconFont網(wǎng)站上傳矢量圖生成字體圖標
? 1. 與設(shè)計師溝通枫虏，得到SVG矢量圖
? 2. IconFont網(wǎng)站上傳圖標妇穴，下載使用
作用：使用字體圖標技巧實現(xiàn)網(wǎng)頁中簡潔的圖標效果
通過i標簽(大部分情況下都是i標簽承接字體圖標)把unicode編碼復制過來
引入方式：
1.文件夾引入：將阿里巴巴矢量圖標庫：iconfornt? 下載到根目錄引入到css
2.類名引入：通過標簽承接字體圖標
? ? ? ? 類名：
? ? ? ? ? 第一個類名是固定的：iconfont;
? ? ? ? ? 第二個類名：通過demo_index.html文件或者項目主頁面，直接去復制文字下方的類名即可
3.偽元素導入方式： 在content內(nèi)容中隶债，填充該字體圖標的unicode編碼腾它，然后把前面三個字符和后面的分好去掉，在最前面添加? \? ? ? ? ? ? 《?\? 作用編譯?》??
4.在線引入字體圖標：直接在link里面寫入阿里巴巴矢量圖標庫網(wǎng)站鏈接的css元素
平面轉(zhuǎn)換
1.平面轉(zhuǎn)換
? 改變盒子在平面內(nèi)的形態(tài)（位移死讹、旋轉(zhuǎn)瞒滴、縮放）
? 2D轉(zhuǎn)換
l 平面轉(zhuǎn)換屬性
? transform
語法
? transform: translate(水平移動距離, 垂直移動距離);
l 取值（正負均可）
? 像素單位數(shù)值
? 百分比（參照物為盒子自身尺寸）
注意：X軸正向為右，Y軸正向為下
l 技巧
? translate()如果只給出一個值, 表示x軸方向移動距離
? 單獨設(shè)置某個方向的移動距離：translateX( ) & translateY( )
右側(cè)盒子背景圖
? left：向左側(cè)移動自身寬度
? right：向右側(cè)移動自身寬度
使用rotate實現(xiàn)元素旋轉(zhuǎn)效果
語法
? transform: rotate(角度);
注意：角度單位是deg
l 技巧：取值正負均可
? 取值為正, 則順時針旋轉(zhuǎn)
? 取值為負, 則逆時針旋轉(zhuǎn)
使用transform-origin屬性改變轉(zhuǎn)換原點
語法
? 默認圓點是盒子中心點
? transform-origin: 原點水平位置 原點垂直位置;
l 取值
? 方位名詞（left、top妓忍、right虏两、bottom、center）
? 像素單位數(shù)值
? 百分比（參照盒子自身尺寸計算）
使用transform復合屬性實現(xiàn)多形態(tài)轉(zhuǎn)換
多重轉(zhuǎn)換原理
? 旋轉(zhuǎn)會改變網(wǎng)頁元素的坐標軸向
? 先寫旋轉(zhuǎn)世剖，則后面的轉(zhuǎn)換效果的軸向以旋轉(zhuǎn)后的軸向為準定罢，會影響轉(zhuǎn)換結(jié)果
使用scale改變元素的尺寸
思考: 改變元素的width或height屬性能實現(xiàn)嗎？
l 語法
? transform: scale(x軸縮放倍數(shù), y軸縮放倍數(shù));
l 技巧
? 一般情況下, 只為scale設(shè)置一個值, 表示x軸和y軸等比例縮放
? transform: scale(縮放倍數(shù));
? scale值大于1表示放大, scale值小于1表示縮小
使用scale改變元素的尺寸
播放按鈕
? 布局
? ::after
? 樣式
? 居中
? 效果
? 縮放
? 透明度（opacity）
漸變
使用background-image屬性實現(xiàn)漸變背景效果
漸變是多個顏色逐漸變化的視覺效果
l 一般用于設(shè)置盒子的背景
