字體圖標(biāo)-iconfont
字體圖標(biāo)展示的是圖標(biāo), 本質(zhì)上是文字.
下載字體圖標(biāo)庫(kù)網(wǎng)站:(https://www.iconfont.cn/)
下載字體包流程:
登陸賬號(hào)→選擇圖標(biāo)庫(kù)→找到需要的圖標(biāo)→加入購(gòu)物車→添加至項(xiàng)目→下載到本地
字體圖標(biāo)使用方法:
1. Unicode使用方法:
- 引入iconfont文件夾中的iconfont.css文件.
- 通過 " i " 標(biāo)簽(大部分情況下都是i標(biāo)簽承接字體圖標(biāo))把unicode編碼復(fù)制過來(lái).
- 聲明字體圖標(biāo)庫(kù) (font-family:iconfont)
2. Font-class使用方法:
- 引入iconfont.css文件
- 通過標(biāo)簽承接字體圖標(biāo): 類名: 第一個(gè)類名是固定的: " iconfont "; 第二個(gè)類名：通過demo_index.html文件或者項(xiàng)目主頁(yè)面，直接去復(fù)制文字下方的類名即可.
平面轉(zhuǎn)換
使用transform屬性實(shí)現(xiàn)元素的位移、旋轉(zhuǎn)、縮放等效果
位移
translate實(shí)現(xiàn)元素位移效果
使用語(yǔ)法: transform: translate (水平移動(dòng)距離, 垂直移動(dòng)距離).
取值: 像素值
像素取值x.png
像素取值y.png
像素取值xy.png
取值: 百分比
像素百分比取值x.png
像素百分比取值y.png
使用translate快速實(shí)現(xiàn)絕對(duì)定位的元素居中效果
水平垂直居中.png
旋轉(zhuǎn)
rotate實(shí)現(xiàn)元素旋轉(zhuǎn)效果
語(yǔ)法: transform: rotate(角度)
角度取值為正, 順時(shí)針旋轉(zhuǎn)
角度取值為父, 逆時(shí)針旋轉(zhuǎn)
旋轉(zhuǎn)示例.png
transform-origin屬性改變轉(zhuǎn)換原點(diǎn)
默認(rèn)原點(diǎn)是盒子的中心點(diǎn)
取值:
- 方位名詞(left、top、right、bottom、center)
- 像素單位數(shù)值(px)
- 百分比(參照盒子自身尺寸計(jì)算)
多重轉(zhuǎn)換
transform復(fù)合屬性實(shí)現(xiàn)多形態(tài)轉(zhuǎn)換
多重轉(zhuǎn)換例子.png
注意: 旋轉(zhuǎn)會(huì)改變坐標(biāo)軸方向, 當(dāng)平移與旋轉(zhuǎn)一起使用的時(shí)候, 要把平移放在旋轉(zhuǎn)的前面
縮放
scale改變?cè)氐某叽?/h4>
transform: scale(x軸縮放倍數(shù), y軸縮放倍數(shù))
scale值大于1表示放大, scale值小于1表示縮小
注意: 一般情況下, 只為scale設(shè)置一個(gè)值, 表示x軸和y軸等比例縮放.
漸變
background-image屬性實(shí)現(xiàn)漸變背景效果
示例:
漸變例子.png
效果:
漸變效果.png
