一、字体图标
1.字体图标本质是文字
2.字体图标的优点：灵活性、轻量级、兼容性
3.图标库：iconfont（https://www.iconfont.cn/）
下载字体包步骤：登录→ 选择图标库 → 选择图标，加入购物车 → 购物车 → 添加至项目 → 下载至本地
4.查看图标：我的资源→我的项目
5.上传矢量图：（注意去除颜色提交即可）
使用字体图标方法
方法一：（Unicode编码）
1.引入样式表：iconfont.css
2.复制粘贴图标对应的Unicode编码
3.设置文字字体，声明字体图标库
方法二：（类名）
1.引入样式表：iconfont.css
2.调用对应类名，必须调用2个类，包括如下：
iconfont类：固定类，必须写；
icon-xxx：图标对应的类名。
（为了方便更改样式，可以在后面加一个自定义类名）
方法三：（在线引入字体图标）
1.引入样式表：iconfont.css
2.调用对应类名，必须调用2个类，包括如下：
iconfont类：固定类，必须写；
icon-xxx：图标对应的类名。
方法四：（搭配伪元素使用）
二、平面转换
使用transform属性实现元素的位移、旋转、缩放等效果
（1）tf属性对于行内元素是无效的；
（2）添加了tf属性的盒子可以调高层级，并保留原来的位置
1、位移
（1）语法：transform：translate（水平移动距离，垂直移动距离);
（2）取值：
1、像素单位数值
2、百分比（参照物为盒子自身尺寸）
（3）技巧：
1、单独方向移动距离：translateX（）& translateY（）
2、只有一个值的情况下，表示x轴方向移动距离
1.1利用位移实现绝对定位居中
原理：位移取值为百分比数值，参照盒子自身尺寸计算移动距离
2、旋转
（1）语法：transform: rotate(角度); 单位是deg
（2）技巧：取值正负均可
正：顺时针； 负：逆时针
（一）、转换原点
（1）语法：transform-origin: 原点水平位置
原点垂直位置;
默认原点为盒子中心
（2）取值：
1、方位名词（left、top、right、bottom、center）
2、像素单位数值
3、百分比（参照盒子自身尺寸计算）
（二）、多重转换
利用transform复合属性实现多形态转换
注意：
1、旋转会改变网页元素的坐标轴向
2、一般先位移，再旋转
3需要连写属性，不能分开，否则会覆盖
4、例：transform：translate（） rotate（）；
3、缩放
使用scale改变元素尺寸
（1）语法：transform: scale(x轴缩放倍数, y轴缩放倍数)
（2）技巧：
1、scale只设置一个值时，表示x、y轴等比例缩放；即translate：scale（缩放倍数）；
2、scale值大于1表示放大, scale值小于1表示缩小
三、渐变
使用background-image属性实现渐变背景
1、渐变是多个颜色逐渐变化的视觉效果
2、一般用于设置盒子的背景
语法：
总结
