字体图标
下载字体图标(https://www.iconfont.cn/)
步骤：百度搜索iconfont-素材库或者搜索你想添加的字体图标--点击你想要添加的某个字体图标的购物车--点击右上角的购物车--选择添加至项目（没有项目的要新建项目）--下载至本地--解压处理，解压的文件放在需要使用的文件夹的根目录。
使用方法
一.unicode编码的使用
步骤：
1引入下载好的字体图标文件夹的iconfont.css。
2.利用空标签（大部分都是用（标签）承接unicode编码内容）
3.声明字体库：font-family：iconfont
二.字体图标font-class的使用方法
1.引入iconfont.css文件
2.通过标签承接字体图标
类名：
第一个类名是固定的：iconfont;
第二个类名：通过demo_index.html文件或者项目主页面，直接去复制文字下方的类名即可。
三. 购物车案例的普通做法：
如图：
四.购物车案例搭配了伪元素的做法，如图：
平面转换
一.位移的基本使用
利用代码：transform: translate 实现位移
1.可以使用像素单位取值：
transform: translateX(100px);
2.使用百分比取值：参考盒子自身大小：
transform: translateX(-50%);
3.使用transform：transiate同时进行两个方向的位移时要选择连写：
向右移动100px，向下移动50px 用合并写法 如果只写一个值，则会默认x轴 */
transform: translate(100px,50px);
tf属性注意点：
1.tf属性注意点：transform: translateX(100px);
对行内元素无效
- 添加了tf属性的盒子可以提高盒子层级，保留原来的位置，和相对定位类似。
二.绝对定位元素居中
还是利用transform: translate属性加上”子绝父相“来实现。
三.双开门小案例
主要是利用双伪元素加上transform: translate属性来实现案例，压住盒子的层级则需要用”子绝父相“。
具体步骤如图：
四.旋转效果的实现
1.要实现鼠标悬停时图片旋转的需求，要利用 transform: rotate属性
transform: rotate （括号里为角度的值）
2.顺时针旋转 360deg
transform: rotate(360deg);
正数为顺时针旋转，负数为逆时针旋转
逆顺时针旋转 -360deg
transform: rotate(-360deg);
3.为了使肉眼能够看到旋转的效果，则要使用transition属性来配合。
五.转换原点
1.旋转的默认原点是盒子中心。
2.改变原点的三种方法
1.取值方位名词 大多数情况下用的方法。
transform-origin: right bottom;
2.具体的像素单位（正负均可）
transform-origin: 200px -200px ;
3.百分比(参照于盒子自身尺寸)
transform-origin:50% 50%;
六.多重转换效果
需求：走到右侧并且旋转一周。
注意点：旋转会改变坐标轴方向。
当平移与旋转一起使用的时候，要把平移放在旋转的前面，代码如下：
transform: translate(600px) rotate(720deg);
渐变
实现图片渐变的方法
背景颜色渐变 bgi background-image: linear-gradient(参数1, 参数2, 参数3, ....);
参数1：
方位：默认的方位从上到下
1.方位名词：例如：从左到右渐变 to right,从左上到右下渐变 to right bottom
2.角度deg：直接写度数即可，不用再加to
参数2：颜色1；
参数3：颜色2；
background-image: linear-gradient(to right top,#333,gold);
background-image: linear-gradient(125deg, black,pink,gold);
渐变的实用案例：
实图如下：
华为案例
代码如图：
效果图如下：
。
