一、字体图标
下载地址(https://www.iconfont.cn/)
有三种引入方法和一种高级写法：
1.Unicode编码
将选择的字体图标加入项目，点击下载；
将下载的文件解压重命名为iconfont；
在页面中引入iconfont文件夹里面的iconfont.css；
在body里面创建i标签去承接字体图标，并且在内容中填写Unicode编码；
在style里面通过选择器声明字体图标库。
<link rel="stylesheet" href="./iconfont.css">
<style>
i {
font-family: iconfont;/* 声明字体图标 */
font-size:20px;
color:red;
}
</style>
<body>
<i></i><!-- 在内容中添加unicode编码 -->
</body>
2.类名
将选择的字体图标加入项目，点击下载；
将下载的文件解压重命名为iconfont；
在页面中引入iconfont文件夹里面的iconfont.css；
在body里面创建i标签去承接字体图标，并添加对应的class类名，iconfont必加，然后挑选对应的字体图标类名；
注意：不能用标签选择器去控制字体图标样式
<link rel="stylesheet" href="./iconfont.css">
<body>
<i class="iconfont iconfont--xx"></i><!-- 如果需要调整字体图标样式，就在单独加一个类名控制 -->
</body>
3.在线引入
复制在线链接代码，在项目中引入，需要在最前面加上http:
通过类名去承接字体图标，并挑选对应类名
<link rel="stylesheet" href="http://at.alicdn.com/t/font_3267166_6qupz2abfq8.css">
<i class="iconfont iconfont-xx"></i>
4.伪类添加子图图标
在项目中引入字体图标
在需要添加字体图标的元素身上添加伪元素
将content里的内容添加上uniconde编码，但需要去掉前三个字符和最后的分号
申明字体图标库
<link rel="stylesheet" href="./iconfont.css">
<style>
i::before {
content: "e603";/* 添加uniconde编码，但需要去掉前三个字符和后面的分号 */
font-family: iconfont;/* 声明字体图标库 */
color: red;
}
</style>
<body>
<i></i>
</body>
二、transform属性之位移、旋转、渐变、缩放
1.位移transform:translate
根据自身的位置进行改变
取值：translate/translateX()/translateY()【XY不区分大小写】
连写：translate(x,y)，当参数只写一个值得时候，默认x轴
特点：对行内元素没有效果，当添加了transform属性的元素会提高层级并且保留位置，跟相对对应特性差不多
2.旋转transform:rotate(Ndeg)
以元素的中心点位置进行旋转，单位deg，正数顺时针旋转，负数逆时针旋转
2.2. transform-origin ; 改变元素旋转的中心点位置
/* 取值1：关键词 */
transform-origin: right bottom;/* 右下角 */
/* 取值2：像素xp */
transform-origin: 100px 100px;/* 如果单位是像素，则原点中心位置是左上角开始计算位置 */
/* 取值3：百分比% */
transform-origin: 100% 100%;/* 百分比是参照元素本身的尺寸进行计算 */
2.3.多重转换，既位移又旋转
transform:translate(100px) rotate(360deg);/* 必须先写位移在写旋转，因为如果先旋转就会在转变的过程中更改x轴的指向，导致位移出错 */
3.渐变background-image: linear-gradient
background-image: linear-gradient(
/* 参数1 */
/* 方向值：默认从上到下 */
/* 1.也可以写关键字，例如，从左到右，to right，从左上到右上渐变to right top，只写最终的值就行 */
/* 2.也可以写角度deg，就不用加to */
to right bottom,
/* 参数2-透明度 */
transparent,
/* 参数3-颜色 */
red,
black
)
4.缩放transform: scale
以元素中心点位置进行缩放
transform:scale(宽倍数,高倍数)，可以只写一个值，默认等边缩放，大于1则是放大，小于1则是缩小，等于1没变化
