一.字体图标

下载字体图标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