一、字体图标
1.iconfont矢量图标的网址（https://www.iconfont.cn/）
2.网页字体图标是需要用"link"引入iconfont.css文件才能生效
3.1使用字体图标的步骤（unicode写法）：
-
先引入字体图标文件
引入字体图标.png -
通过i标签(大部分情况下都是i标签承接字体图标)把unicode编码复制过来
unicode编码.png -
声明字体图标库
声明图标库.png
3.2
-
引入iconfont.css文件
引入字体图标.png 通过标签承接字体图标
类名：
第一个类名是固定的：iconfont;
第二个类名：通过demo_index.html文件或者项目主页面，直接去复制文字下方的类名即可
注意： 这个引用字体图标的方式不能用标签名去改变属性，不能生效，iconfont的权重比标签的权重高，最好是自己起一个类名来使用修改样式，否则用到相同的字体图标的时候，会导致继承的效果，若是需要每个都不一样，就只有通过自己重新起类名来修改其中的样式了
3.3
-
先引入字体图标文件
引入字体图标.png -
在content内容中，填充该字体图标的unicode编码，然后把前三个字符和后面的分号去掉，在最前面添加“\”
\作用：编译
伪类使用字体图标的方式.png
3.4 在线引入
注意：在线引入想当于引入了字体图标文件，其使用方法还是跟类名的使用方法相同的
二、平面转换（transform）
-
平移：translate
平移：translateX、translateY、这两个是对于x轴和y轴的位置进行平移的，对象的对象是针对于那些需要平移的盒子而设定的，其效果是瞬间的。
想要看到其效果是要添加过渡（transition），设置相应的动作的时长，同时需要搭配（hover）伪元素才能有相应的动作的。
单位：px/像素
transtion()：当只有一个值的时候，默认是X轴的正方向（向右是正方向，向下是正方向；反之为负值）
单位：%
对应的是实现该效果的盒子值，参照的是自身盒子的尺寸
特点：
1.transform属性对于行内元素是无效的
2.添加了transform属性的盒子可以提高盒子层级，保留原来的位置----类似于相对定位的特点
transform.png -
旋转（rotate）
旋转.png
单位：deg
正值是顺时针
负值是逆时针 -
缩放（scale）
transform三要素.png
注意点：
transform注意点.png -
子盒子在父盒子内部居中的案例
子盒子在父盒子内部居中的效果.png -
转换原点
转换的参考原点.png
意思就是选择某个点作为参照点（多半用于旋转的作用）
三、 渐变
渐变.png
- 效果默认是水平向右的渐变方向
- to 方位名词,color1,color2会默认向设置的那个方向渐变
- 角度（deg）也会从设置的那个角度去渐变
- 获取渐变色彩的链接（https://uigradients.com/#KyooTah）
