下载字体图标（了解）使用字体图标（重点）引入相关文件（前提）使用类名引入字体图标（重点记住）使用unicode编码(了解) 使用伪元素字体图标（记住）小结位移 translate应用- 盒子水平和垂直开门大吉案例旋转 rotate设置中心点 transform-origin多形态变形小技巧缩放 scale线性渐变

一、字体图标

下载字体图标（了解）

字体图标的 选择，上传 UI美工她们来做的，我们了解即可。

具体的步骤：

使用字体图标（重点）

引入相关文件（前提）

复制相关的文件，到 fonts文件夹里面。
引入 css (iconfont.css)这个css样式(这个样式放在其他引入标签前面(CSS层叠性)
```
 <link rel="stylesheet" href="./fonts/iconfont.css">
```

使用类名引入字体图标（重点记住）

如果是一个标签来使用字体文件，可以采取2个类名的形式。（开发最常用）

 <span class="iconfont icon-daohangdizhi"></span>

第一个类名 iconfont 目的是告诉这个盒子里面的文字是字体图标。不是普通的文字。
第二个类名 icon-daohangdizhi，告诉盒子到底使用哪个小图标。

使用unicode编码(了解)

也可以直接在标签内部放入一个编码

html标签

  <strong> &#xe8ab; </strong>

css 要指定当前标签的文字是字体图标，必须要声明。

  strong {font-family: 'iconfont';}

使用伪元素字体图标（记住）

 <div class="car1">购物车</div>

这样结构比较的清晰，省了很多的小盒子

 .car1::before {content: '\e8c6';color: blue;margin-right: 5px;font-family: "iconfont" !important;}.car1::after {content: '\e665';font-family: "iconfont" !important;}

小结

字体图标是前端工程师必须具备的知识点。开发中，字体图标上传，选择，都是网页美工给我们准备好了。

我们重点是下载和使用。

字体图标使用可以整体分为两大步骤：

复制相关文件到网站根目录下，并引入css文件到html页面中。
- 通常都放到fonts文件夹里面。
- 通常iconfont.css 和字体放一起。
调用。
- 开发中最常用的是使用类名来调用，所以重点记住这个就可以了。
```
 <span class="iconfont icon-daohangdizhi"></span>
```

~注意声明字体样式(可以继承)

二、变形 transform

变形可以改变盒子在平面内的形态（位移、旋转、缩放等等）

位移 translate

translate可以让盒子沿着x轴或者y轴来移动。

语法：

 transform: translate(x, y);transform: translateX(x);transform: translateY(y);

问题：

他和margin有啥区别。
- margin移动盒子会影响其余的盒子。把其他人挤走。
- 位移translate移动盒子不会影响其他的盒子。不脱标。

注意：

移动的时候可以写百分比，如果使用的百分比，移动的是盒子自身的宽度

 transform: translateX(100%);

应用- 盒子水平和垂直

可以让一个子盒子在父盒子里面水平和垂直居中。

.father {position: relative;width: 500px;height: 500px;background-color: pink;margin: 100px auto;
}.son {position: absolute;top: 50%;left: 50%;/* 百分比，往上走盒子自己高度的一半，往左走盒子宽度的一半 */transform: translate(-50%, -50%);width: 199px;height: 199px;background-color: skyblue;
}

作业：请同学们自己整理，实现一个子盒子，在父盒子里面水平居中和垂直居中有哪些方法？整理成笔记，做好写一篇博客文章。

1.利用transform属性的translate属性 2.四个边都为0,margin:auto

3.margin-top,margin-left(margin-bottom.margin-right)

开门大吉案例

注意点，右边车子的背景图需要用到背景图片定位。 background-position: right;（使背景图在右上角）

效果：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}.box {overflow: hidden;width: 1366px;height: 600px;margin: 50px auto;background: url(./images/bg.jpg) no-repeat top center;}.box::before,.box::after {content: '';width: 50%;height: 600px;transition: .5s;background: url(./images/fm.jpg) no-repeat;}.box::before {float: left;background-color: pink;}.box::after {float: right;background-color: purple;/* 背景图片右对齐 */background-position: right center;}/* .box:hover .box::before  *//* 鼠标经过 box 大盒子，  两个子盒子（before 和 after）来拉动 */.box:hover::before {/* 百分比是盒子自身的宽度 */transform: translateX(-100%);}.box:hover::after {/* 百分比是盒子自身的宽度 */transform: translateX(100%);}</style>
</head><body><div class="box"></div>
</body></html>

旋转 rotate

旋转可以让盒子旋转角度。

语法：

transform: rotate(45deg);    一定写单位

如果是正度数，则是顺时针旋转

如果是负度数，则是逆时针旋转

设置中心点 transform-origin

/* 设置旋转的中心点位置 */

  transform-origin: right bottom;

多形态变形小技巧

如果需要移动，也需要旋转，则一定先写移动，后写旋转, css属性书写顺序影响代码执行。
```
 transform: translate(-50%, -50%) rotate(360deg);
```
注意，多个值之前用空格隔开。

缩放 scale

语法：

transform: scale(1.2)；

它比这宽度和高度最大的优势：他是用中心点来进行缩放的，同样他不会影响其他的盒子。

案例：

和平精英

三、渐变

线性渐变

基本语法：

      background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .5))

四、今日单词

单词	意义	示例	注意点
iconfont	字体图标		表面看是图片，实际是字体。引入字体图标样式表时要link到最上面。
transition	过渡	transition：all .5s	谁做动画效果跟谁加过渡，all和时间通过,隔开
transform	变形（位移，旋转，缩放）	transform:translate(x轴，y轴) rotate（）	旋转要放在位移后面。
rotate	旋转	transform:rotate（）	单位deg（正数为顺时针，反之）
scale	缩放	transform：scale(1.5)	取值为百分比150%变大
linear-gradient	线性渐变	background-image:linear-gradient(颜色1,颜色2)	第一个参数可以设置方向；可以设置透明度渐变
opacity	不透明	opacity：1（完全不透明）	设置为0为完全透明（文字图片都全部透明）可以加过渡
transparent	透明	border: 2px solid transparent;	可以隐藏边框线，经过时再设置颜色 border: 2px solid #a08a55;