一、字体图标

下载字体图标（了解）

字体图标的 选择，上传 UI美工前端不需要做但是要知道如果小公司没有美工要自己做

具体的步骤：

使用字体图标（重点）

简明来说就是用文字代替精灵图优化加载速度方便不占用内存

引入相关文件（前提）

复制相关的文件，到 fonts文件夹里面。如果不用线上字体图标可以使用 fonts文件夹第一种引入相关文件第一个css主要图表样式文件 1.ttf2. woff3. woff2字体格式兼容文件不可缺少否则会出现兼容性问题

引入 css 在头部用link标签引入如果不引入无法调用
```
<link rel="stylesheet" href="./fonts/iconfont.css">
```

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

如果是一个标签来使用字体文件，可以采取2个类名的形式，第一个是iconfont是图标文档名第二个icon-xxx是具体调用的图标名在iconftont网站页面项目页复制粘贴。（开发最常用）

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

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

使用unicode编码(不好用没有可视化效果了解就好)

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

html标签

 <strong> &#xe8ab; </strong>

css 要指定当前标签的文字是字体图标，必须要声明声明调用的css文件，用font-family来声明。

 strong {
      font-family: 'iconfont';
}

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

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

这样结构比较的清晰，省了很多的小盒子不用精灵图真的爽

.car {
      width: 200px;
      height: 45px;
      border: 1px solid pink;
      text-align: center;
      line-height: 45px;
      font-family: 'iconfont';
    }
.car::before {
    content: "\e63b";

}
.car::after {
    content: "\e686";
}

注意：使用伪元素字体图标，一定要声明字体。 font-family: "iconfont"

小结

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

我们重点是下载和使用。

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

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

二、变形 transform（2D）

变形可以改变盒子在平面内的形态（位移transform: translate（xyz轴）;、旋转transform: rotate(45deg单位度);、缩放transform:scale(倍数)等等）

位移 translate

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

语法：

transform :变换转换

translate: 改编，改写；转换（计算机程序或语言所含的信息）

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

问题：

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

注意：

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

 transform: translateX(100%);

应用- 盒子水平和垂直

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

.inner {
        /*第一种居中方法：*/
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100px;
      height: 100px;
      background-color: skyblue;
      transform: translate(-50%, -50%);
    }

    .inner {
  /* 第二种居中方法：*/
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      width: 200px;
      height: 200px;
      background-color: skyblue;
    }

开门效果

效果：

图片1.gif

<!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:''带引号*/
      content: '';
      width: 50%;
      height: 600px;
      /*transition如果是多类要加all*/
      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

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

语法：旋转 rotate deg:度程度度数 一定要写单位

transform: rotate(45deg);

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

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

设置中心点 transform-origin

设置旋转的中心点位置可以用方位名词可以用像素百分比调节位置

transform-origin: right bottom;

多形态变形小技巧

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

缩放 scale

语法：

transform: scale(1.2)；

数值大于1是放大，小于1是缩小。它比这宽度和高度最大的优势：他是用中心点来进行缩放的，同样他不会影响其他的盒子用作网页提示动画效果。

三、渐变

线性渐变

优势颜色渐变背景可以直接用代码实现不用UI麻烦
基本语法：

透明渐变
      background-image: linear-gradient( 120deg(角度方向) rgba(0, 0, 0, 0)10%（分解点）, rgba(0, 0, 0, .5)90%)

初识移动web你不能不知道的事