一、字体图标

1.字体图标本质是文字
2.字体图标的优点：灵活性、轻量级、兼容性
3.图标库：iconfont（https://www.iconfont.cn/）
下载字体包步骤：登录→ 选择图标库 → 选择图标，加入购物车 → 购物车 → 添加至项目 → 下载至本地
4.查看图标：我的资源→我的项目
5.上传矢量图：（注意去除颜色提交即可）

矢量.png

使用字体图标方法

方法一：（Unicode编码）

1.引入样式表：iconfont.css
2.复制粘贴图标对应的Unicode编码
3.设置文字字体，声明字体图标库

Unicode.png

方法二：（类名）

1.引入样式表：iconfont.css
2.调用对应类名，必须调用2个类，包括如下：
iconfont类：固定类，必须写；
icon-xxx：图标对应的类名。
（为了方便更改样式，可以在后面加一个自定义类名）

类名.png

方法三：（在线引入字体图标）

1.引入样式表：iconfont.css
2.调用对应类名，必须调用2个类，包括如下：
iconfont类：固定类，必须写；
icon-xxx：图标对应的类名。

在线地址.png

在线引入字体图标.png

方法四：（搭配伪元素使用）

搭配伪元素.png

二、平面转换

使用transform属性实现元素的位移、旋转、缩放等效果

（1）tf属性对于行内元素是无效的；

（2）添加了tf属性的盒子可以调高层级，并保留原来的位置

x轴.png

1、位移

（1）语法：transform：translate（水平移动距离，垂直移动距离);
（2）取值：
1、像素单位数值
2、百分比（参照物为盒子自身尺寸）
（3）技巧：
1、单独方向移动距离：translateX（）& translateY（）
2、只有一个值的情况下，表示x轴方向移动距离

位移.png

1.1利用位移实现绝对定位居中

原理：位移取值为百分比数值，参照盒子自身尺寸计算移动距离

居中定位.png

2、旋转

（1）语法：transform: rotate(角度); 单位是deg
（2）技巧：取值正负均可
正：顺时针； 负：逆时针

旋转.png

（一）、转换原点

（1）语法：transform-origin: 原点水平位置
原点垂直位置;
默认原点为盒子中心
（2）取值：
1、方位名词（left、top、right、bottom、center）
2、像素单位数值
3、百分比（参照盒子自身尺寸计算）

转换原点.png

（二）、多重转换

利用transform复合属性实现多形态转换

注意：
1、旋转会改变网页元素的坐标轴向
2、一般先位移，再旋转
3需要连写属性，不能分开，否则会覆盖
4、例：transform：translate（） rotate（）；

多重转换.png

3、缩放

使用scale改变元素尺寸

（1）语法：transform: scale(x轴缩放倍数, y轴缩放倍数)
（2）技巧：
1、scale只设置一个值时，表示x、y轴等比例缩放；即translate：scale（缩放倍数）；
2、scale值大于1表示放大, scale值小于1表示缩小

缩放.png

三、渐变

使用background-image属性实现渐变背景

1、渐变是多个颜色逐渐变化的视觉效果
2、一般用于设置盒子的背景
语法：

渐变.png

渐变.png

总结

总结1.jpg

总结2.jpg