一、字体图标

1. 下载图标

登录图标库https://www.iconfont.cn/ → 选择图标库 → 选择图标，加入购物车 → 购物车 → 添加至项目 → 下载至本地

2. 使用图标

 a.字体图标Unicode使用法
     a-1.引入iconfont文件夹中的iconfont.css文件
     a-2.通过i标签(大部分情况下都是i标签承接字体图标)把unicode编码复制过来
     a-3.声明字体图标库
 b.字体图标Font-class使用法
     b-1.引入iconfont.css文件
     b-2.通过标签承接字体图标
    类名：
      第一个类名是固定的：iconfont;
      第二个类名：通过iconfont文件夹中的demo_index.html文件或者项目主页面，直接去复制文字下方的类名即可

二.平面转换

1.平面转换属性transform

     特点：
  1.transform可以增大盒子的层级；
  2.transform对于行内元素不起效果

2.平移

  技巧：
   1.如果 translate(一个值) 表示x轴方向的移动，y轴不动
   2.X,Y小写大写都有效果
    

      .box:hover .son1 {
        /* 取值正负均可，x轴正方向为右，y轴正方向为下 */
        /* tf 像素单位取值 */
        transform: translate(-100px, 100px);

        /* tf 百分比 取值：参考盒子自身大小 */
        transform: translate(100%, -50%);

        /* 如果 translate(一个值) 表示x轴方向的移动，y轴不动*/
        transform: translate(100px);

        /* X,Y小写大写都有效果 */
        transform: translateY(100px);
      }

3.绝对定位元素居中

    position: absolute;
    /* 固定代码 */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

4.旋转

    /* 顺时针旋转 360deg */
    transform: rotate(360deg);
    /* 逆顺时针旋转 360deg */
    transform: rotate(-360deg);

5.转换原点

    /* 1.取值方位名词 最多 tfo */
    /* transform-origin: left bottom; */
    /* transform-origin: center center; */

    /* 2.具体的像素单位（正负均可） */
    transform-origin: -125px 0;

    /* 3.百分比(参照于盒子自身尺寸) */
    transform-origin: 100% 100%;

6.多重转换效果

    /* 走到右侧并且旋转一周 */
  .box:hover img {
    /* 
    注意点：旋转会改变坐标轴方向
    当平移与旋转一起使用的时候，要把平移放在旋转的前面
    */
    /* 
     transform 复合属性，复合了平移，旋转，缩放，属性值之间以空格隔开

     注意点：平移和旋转如果一起使用，必须要先写平移，再写旋转，因为旋转会改变坐标轴的方向
     */
    transform: translate(600px) rotate(720deg);

7.缩放效果

    /* 缩放: scale() 大于1表示放大，小于1表示缩小 */
    /* transform: scale(1.2, 1.2); */

    /* 缩放如果只有一个值，那么控制的是宽度的缩放，高度等比例缩放 */
    transform: scale(2);

三.渐变

    /* 
    背景颜色渐变 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 bottom, green, orange);

    background-image: linear-gradient(45deg, green, orange, blue, yellow);