一.字体图标
下载字体图标iconfont-阿里巴巴矢量图标库
步骤：百度搜索iconfont--素材库或者搜索栏去搜索你想添加的字体图标--点击你想要添加的某个字体图标的购物车--点击右上角的购物车--选择添加至项目--下载至本地，解压出来，解压的文件放在需要使用的文件夹的根目录
使用方法
1.unicode编码使用：
步骤：
1.引入下载好的字体图标文件夹的iconfont.css；
2.利用空标签（大部分都是用i标签）去承接unicode编码内容；
3.声明字体图标库 font-family：iconfont
image
2.上传矢量图
上传SVG图标----浏览本地图标------去除颜色提交-------加入购物车-------下载使用
二.平面转换
1.位移
transform:translate(水平移动距离，垂直移动距离)；
1.像素单位数值
2.百分比（参照物为盒子自身尺寸）
注意：X轴正向为右，Y轴正向为下
技巧
translate()如果只给出一个值, 表示x轴方向移动距离
单独设置某个方向的移动距离：translateX() & translateY()
目标：使用translate快速实现绝对定位的元素居中效果
translate实现居中.png
2.旋转
transform:rotate（度数deg)；
正负均可
目标：使用transform-origin属性改变转换原点
transform-origin:原点水平位置 原点垂直位置；（参考左上角点位）
①方位名词（left、top、right、bottom、center）
②像素单位数值
③百分比（参照盒子自身尺寸计算）
多重转换：transform:translate() rotate();
注意
旋转会改变网页元素的坐标轴向，如果先写旋转，则后面的转换效果的轴向以旋转后的轴向为准，
会影响转换效果。
3.尺寸
transform：scale（x轴缩放倍数，y轴缩放倍数）；
三.渐变
1.使用background-image属性实现背景渐变效果
background-image:linear-gradient(参数1，参数2，参数3... )；
渐变.png
渐变遮罩层
鼠标移动到图片上，遮罩层出现
渐变2.png
