一、字體圖標(biāo)

1.通過(guò)iconfont-阿里巴巴矢量圖標(biāo)庫(kù)[https://www.iconfont.cn/ ]下載字體圖標(biāo)。
進(jìn)入iconfont-阿里巴巴矢量圖標(biāo)庫(kù)，挑選自己能用到的圖標(biāo)，加入購(gòu)物車；
挑選完成后點(diǎn)擊主頁(yè)右上角的購(gòu)物車圖標(biāo)，把所選的圖標(biāo)添加至項(xiàng)目（如無(wú)項(xiàng)目則新建項(xiàng)目）；
下載至本地，在項(xiàng)目的根目錄解壓文件，文件命名iconfont；
2.字體圖標(biāo)的兩種引入方法

• 字體圖標(biāo)Unicode使用法
  1.引入iconfont文件夾中的iconfont.css文件

  
  
  image.png

  2.通過(guò)i標(biāo)簽(大部分情況下都是i標(biāo)簽承接字體圖標(biāo))把unicode編碼復(fù)制過(guò)來(lái)
  獲取unicode編碼方式如下，點(diǎn)擊第一個(gè)選項(xiàng)Unicode，然后選擇所需的圖標(biāo)復(fù)制代碼

  
  
  image.png
  
  

  3.聲明字體圖標(biāo)庫(kù)

  
  
  image.png

• Font-class使用法
  1.引入iconfont文件夾中的iconfont.css文件
  2.通過(guò)標(biāo)簽承接字體圖標(biāo)
  類名：
  第一個(gè)類名是固定的：iconfont;
  第二個(gè)類名：通過(guò)demo_index.html文件或者項(xiàng)目主頁(yè)面，直接去復(fù)制文字下方的類名即可
  獲取類名方式如下圖，點(diǎn)擊項(xiàng)目里的第二個(gè)選項(xiàng)Font class，然后選擇所需的圖標(biāo)復(fù)制代碼

  
  
  image.png

二、平面轉(zhuǎn)換 transform

transform 特點(diǎn)：1.tf對(duì)行內(nèi)元素?zé)o效
2.tf屬性提高盒子的層級(jí)，保留原來(lái)的位置---類似于相對(duì)定位的特點(diǎn)
屬性值：
1.translate 平移——向右或者向下移動(dòng)是正數(shù)，向左或向上移動(dòng)是負(fù)數(shù)；
translate最常用于盒子的水平垂直居中（絕對(duì)定位元素居中）父元素加上相對(duì)定位，子元素代碼如下圖：

image.png

2.rotate 旋轉(zhuǎn)——注意加單位度數(shù)：deg

  /* 順時(shí)針旋轉(zhuǎn) 360deg */
  transform: rotate(360deg); 

  /* 逆順時(shí)針旋轉(zhuǎn) 360deg */
  transform: rotate(-360deg);

• transform-origin——轉(zhuǎn)換原點(diǎn)

  /* 1.取值方位名詞 最多（left、top、right、bottom、center） */
  transform-origin: right bottom; 
  
  /* 2.具體的像素單位（正負(fù)均可） */
   transform-origin: -100px -100px; 
  
  /* 3.百分比(參照于盒子自身尺寸) */
  transform-origin: 30% 30%;
  

-多重轉(zhuǎn)換效果——先平移后旋轉(zhuǎn)

     /* 
    注意點(diǎn)：旋轉(zhuǎn)會(huì)改變坐標(biāo)軸方向
    當(dāng)平移與旋轉(zhuǎn)一起使用的時(shí)候，要把平移放在旋轉(zhuǎn)的前面
     */
  transform: translate(600px) rotate(720deg);

3.scale()——縮放效果

  /* 縮放: scale() 大于1表示放大，小于1表示縮小 */
  transform: scale(1.1);  /*放大1.1倍*/

  transform: scale(0.9);/*縮小0.9倍*/

三、漸變背景

     /* 背景顏色漸變 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

    參數(shù)2：顏色1；
    參數(shù)3：顏色2；.....
     */

  /* background-image: linear-gradient(to right, red, pink, hotpink); */
  /* background-image: linear-gradient(30deg, red, pink, hotpink); */
 background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.6));

透明：transparent