1.字體圖標(biāo)
解釋:字體圖標(biāo)展示的是圖標(biāo)，本質(zhì)是字體
下載步驟:在iconfont.cn字體圖標(biāo)庫選擇想要的字體圖標(biāo)添加到購(gòu)物車,點(diǎn)開購(gòu)物車添加至項(xiàng)目,在我的項(xiàng)目中將字體圖標(biāo)文件夾壓縮包下載至本地,解壓縮為iconfont文件夾
2.字體圖標(biāo)的使用方法
01-字體圖標(biāo)unicode用法:
(1).使用link標(biāo)簽引入樣式表：iconfont.css
(2).復(fù)制圖標(biāo)對(duì)應(yīng)的Unicode編碼,然后粘貼到需要用的標(biāo)簽中
(3).聲明(設(shè)置)字體樣式
02-字體圖標(biāo)font-class用法:
(1).引入字體圖標(biāo)樣式表
(2).給標(biāo)簽添加類名,第一個(gè)類名iconfont(必要),第二個(gè)類名則是項(xiàng)目主頁面對(duì)應(yīng)字體圖標(biāo)下方的類名,若需更改字體圖標(biāo)樣式,最好再添加一個(gè)自取的類名,iconfont.css中已經(jīng)聲明字體圖標(biāo)庫
03-在線引入字體圖標(biāo):iconfont.cn我的項(xiàng)目中font class,查看在線鏈接-復(fù)制鏈接-html頁面中引入即可------注意:在線引入字體圖標(biāo),要在復(fù)制的鏈接前面加上 http: ------
3.圖標(biāo)庫沒有項(xiàng)目所需圖標(biāo)怎么辦
上傳步驟:
4.平面轉(zhuǎn)換
目標(biāo)：使用transform屬性實(shí)現(xiàn)元素的位移、旋轉(zhuǎn)、縮放等效果
01.位移:
轉(zhuǎn)換注意點(diǎn)：
1.transform屬性對(duì)于行內(nèi)元素是無效的；
2.添加了transform屬性的盒子可以提高盒子層級(jí)，保留原來的位置---類似于相對(duì)定位的特點(diǎn)
3.translate(只有一個(gè)值) = translateX()
02.絕對(duì)定位居中:(transform:translate( xx%, xx%)的百分比取值是參照盒子自身尺寸計(jì)算移動(dòng)距離的)
03.旋轉(zhuǎn)
04.轉(zhuǎn)換原點(diǎn)
05.多重轉(zhuǎn)換:(平移屬性和旋轉(zhuǎn)屬性都要寫的話,要把旋轉(zhuǎn)屬性寫在平移屬性后面)
06.縮放:
使用transform:scale縮放,是以圖片中心為原點(diǎn)進(jìn)行縮放的
設(shè)置width(寬)或height(高)縮放是以圖片左上角為原點(diǎn)進(jìn)行縮放的
07.漸變:( transparent:透明 )
背景顏色漸變 bgi background-image: linear-gradient(參數(shù)1, 參數(shù)2, 參數(shù)3, ....);
參數(shù)1：
方位：默認(rèn)的方位從上到下
1.方位名詞：例如：從左到右漸變 to right,從左上到右下漸變 to right bottom
2.角度單位deg：直接寫度數(shù)即可，不用再加to(默認(rèn)12點(diǎn)鐘方向?yàn)?°,指針指向哪個(gè)方向,就代表向哪個(gè)方向漸變)
參數(shù)2：顏色1；
參數(shù)3：顏色2；......
