字体图标，平面变化，渐变1.unicode方法（不常用） 2.font-class使用法(常用) 引入iconfont.

1.unicode方法（不常用）

<!-- 1.引入iconfont.css文件 -->
    <link rel="stylesheet" href="./iconfont/iconfont.css" />
    <style>
      /* 3.声明字体图标库 */
      i {
        font-family: iconfont;
      }
    </style>
  </head>

  <body>
    <!-- 2.通过i标签把unicode编码复制过来 -->
    <i>&#xe600;</i>
  </body>

2.font-class使用法(常用) 引入iconfont.css文件

<link rel="stylesheet" href="./iconfont/iconfont.css" />`
  
        <!--2.通过i标签承接字体图标
        类名：
          第一个类名是固定的：iconfont;
          第二个类名：通过html文件，直接去复制文字下方的类名即可-->
          
`<i class="iconfont icon-gouwucheman"></i>

3.在线引入字体图标

<link
  rel="stylesheet"
  href="http://at.alicdn.com/t/font_2970681_7my4eaeshh7.css"
/>

<i class="iconfont icon-zhaoxiangji"></i>

## 2.平面转换

位移

1.transform: translate(X,Y);

2.transform: translateX(); x轴正数是向右，负数是向左。

3.transform: translateY(); y轴正数是向下，负数是向上。

绝对定位元素居中

使用了 transform: translate(X,Y);

子绝父相做法

      {
        left:50%;
        top: 50%;
        transform: translate(-50%, -50%); 
        }

1.transform: rotate(1deg);

deg是角度的单位，正数为顺时针旋转，负数为逆时针旋转。

旋转原点改变

transform-origin: bottom center; top，bottom，left，right，center transform-origin: -100px -100px; 坐标轴从元素左上角作坐标轴（0，0）开始计算 transform-origin: -50% -50%; 以百分比计算更好求得居中

· 缩放

transform: scale(2) ; 1为原始大小，大于1为放大，小于1为缩小。

鼠标悬停hover也要保持缩放 scale() 标签

多重转换效果

transform: translate(600px) scale(2) rotate(360deg);

连写以空格间隔开；

旋转标签必须写在最后，不然坐标轴旋转后其他元素进行平移就会跟着坐标轴进行平移。

平移缩放旋转都是同时进行。

同一个类名标签只能有一个 transform 多个transform会被最后一个替换样式。

3.渐变

背景颜色渐变 bgi background-image: linear-gradient(参数1, 参数2, 参数3, ....);

参数1：

方位：默认的方位从上到下

1.方位名词：to right,to right bottom

2.角度deg：直接写度数即可，不用再加to

3.transparent 透明

参数2：颜色1；

参数3：颜色2；.....（可以加无限个颜色）

/* 当鼠标移入盒子的时候，出现一个遮罩层，并且遮罩层的背景颜色是渐变的 */
    .box::after {
      position: absolute;
      top: 0;
      left: 0;
      content: '';
      width: 100%;
      height: 100%;
      background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
    /*background-image: linear-gradient(to top, #59c173, #a17fe0, #5d26c1);*/
      opacity: 0;
      transition: 0.5s;
    }

    .box:hover::after {
      opacity: 1;
    }