day1
一、字體圖標
1 字體圖標
字體圖標展示的是圖標，本質(zhì)是字體。處理簡單的、顏色單一的圖片
2 字體圖標的優(yōu)點
靈活性：靈活地修改樣式，例如：尺寸、顏色等輕量級：體積小、渲染快、降低服務(wù)器請求次數(shù)兼容性：幾乎兼容所有主流瀏覽器使用方便：
1.下載字體包
2.使用字體圖標
3 下載字體包
登錄（新浪微博） → 選擇圖標庫 → 選擇圖標，加入購物車 → 購物車 → 添加至項目 → 下載至本地
步驟：
1.引入字體圖標樣式表
2.**
方法1：調(diào)用圖標對應(yīng)的類名，必須調(diào)用2個類名iconfont類：基本樣式，包含字體的使用等icon-xxx：圖標對應(yīng)的類名
方法2：使用字體圖標 - Unicode編碼
引入樣式表：iconfont.css復制粘貼圖標對應(yīng)的Unicode編碼設(shè)置文字字體
方法3：使用偽元素***
方法4：在線引入
注意：
1.使用默認瀏覽器打開需要在前面添加http：
2.需要有網(wǎng)絡(luò)，實際開發(fā)使用本地下載較多
二、平面轉(zhuǎn)換
平面轉(zhuǎn)換改變盒子在平面內(nèi)的形態(tài)（位移、旋轉(zhuǎn)、縮放）2D轉(zhuǎn)換平面轉(zhuǎn)換屬性transform
1 位移
目標：使用translate實現(xiàn)元素位移效果
語法transform: translate(水平移動距離, 垂直移動距離);取值（正負均可）
1.像素單位數(shù)值
2.百分比（參照物為盒子自身尺寸）
3.注意：X軸正向為右，Y軸正向為下
技巧
1.translate()如果只給出一個值, 表示x軸方向移動距離
2.單獨設(shè)置某個方向的移動距離：translateX() & translateY()
3.transform對行內(nèi)元素不起效果
1.1 絕對定位居中
目標：使用translate快速實現(xiàn)絕對定位的元素居中效果
核心代碼：
原理位移取值為百分比數(shù)值，參照盒子自身尺寸計算移動距離
2 旋轉(zhuǎn)
語法transform: rotate(角度);注意：角度單位是deg技巧：取值正負均可取值為正, 則順時針旋轉(zhuǎn)取值為負, 則逆時針旋轉(zhuǎn)
2.1 轉(zhuǎn)換原點
語法默認原點是盒子中心點transform-origin: 原點水平位置 原點垂直位置;?
取值
1.方位名詞（left、top、right、bottom、center）
2.像素單位數(shù)值
3.百分比（參照盒子自身尺寸計算）
2.2 多重轉(zhuǎn)換
transform: translate() rotate();
多重轉(zhuǎn)換原理旋轉(zhuǎn)會改變網(wǎng)頁元素的坐標軸向先寫旋轉(zhuǎn)，則后面的轉(zhuǎn)換效果的軸向以旋轉(zhuǎn)后的軸向為準，會影響轉(zhuǎn)換結(jié)果
3 縮放
語法transform: scale(x軸縮放倍數(shù), y軸縮放倍數(shù));
技巧
1.一般情況下, 只為scale設(shè)置一個值, 表示x軸和y軸等比例縮放
2.transform: scale(縮放倍數(shù));
3.scale值大于1表示放大, scale值小于1表示縮小
4.縮放和旋轉(zhuǎn)沒有先后順序
三、漸變
使用background-image屬性實現(xiàn)漸變背景效果
漸變是多個顏色逐漸變化的視覺效果一般用于設(shè)置盒子的背景
語法：
拓展：
1.顏色后面可以加百分比，代表顏色占比
半透明遮罩層
語法：
