今天的学习内容分为3大部分，我将分别从字体图标的使用、平面转换和渐变背景这三个方面来给大家介绍我今日所学

一、字体图标的使用

1、font-class的使用

复制相关文件到本地fonts目录下（iconfont.css、 iconfont.ttf、 iconfont.woff、 iconfont.woff2 ）

并引入字体图标css文件：

<link rel="stylesheet" href="./fonts/iconfont.css">

2.标签使用字体图标: iconfont必须调用

<i class="iconfont 字体图标的类名">

2、unicode的使用

复制相关文件到本地fonts目录下（iconfont.css、 iconfont.ttf、 iconfont.woff、 iconfont.woff2 ）

并引入字体图标css文件：

<link rel="stylesheet" href="./fonts/iconfont.css">

2.使用标签引入文件：iconfont必须调用

<i class="iconfont">&#xe8748</i>标签内放入标签编码名

3、伪元素的使用

::before/after{content="\+后四位"}	content内放入标签编码

font-family:'iconfont' ; 必须声明字体类型 可以继承

4、在线链接引入的使用

1.在www.iconfont.cn网站中复制相应的嘛在线链接地址

2.在HTML文件中使用link引入

3.准备相应的标签调用两个类名即可

二、平面转换 transfrom（2D）

1、元素位移（translate）

注意事项：块级元素和行内块元素可以加位移，行内元素不能加位移

语法：

1.transform:translate(水平移动距离,垂直移动距离);
2.transform:translateX();  transform:translateY(); 单方向移动

取值：1.像素单位取值(px)
      2.百分比(百分比移动的是盒子自身宽或长)

2、元素旋转（rotate）

transform:rotate(角度)

取值： 1.取值为正，顺时针旋转
       2.取值为负，逆时针旋转

3、转换原点（origin）

transform-origin:原点水平位置 原点垂直位置;

取值：像素单位数值、百分比(参照盒子自身尺寸计算)

4、多重旋转

语法：

transform:translate( )  rotate( )

5、元素缩放（scale）

语法：

transform:scale(x轴缩放倍数,y轴缩放倍数);

1.如果只有一个数值代表x与y轴等比例缩放。

2.值为1不变，比1小缩小，比1大放大。

3.缩放会影响层级，有类似于z-index的层级，所以会盖住前面的

三、背景渐变

语法：

 1.background-image:linear-gradient(颜色值1,颜色值2);
 2.background-image:linear-gradient(方向,颜色值1,颜色值2);  第一个值可以为方向
 3.background-image:linear-gradient(rgba(0,0,0,0) 0%,rgba(0,0,0,.5) 70%); 百分比为渐变的位置从0%渐变到70%，也可以理解为只渐变70%的范围
 4.background-image:linear-gradient(transparent,ragba(0,0,0,.5));