一、字体图标

1.通过iconfont-阿里巴巴矢量图标库[https://www.iconfont.cn/ ]下载字体图标。
进入iconfont-阿里巴巴矢量图标库，挑选自己能用到的图标，加入购物车；
挑选完成后点击主页右上角的购物车图标，把所选的图标添加至项目（如无项目则新建项目）；
下载至本地，在项目的根目录解压文件，文件命名iconfont；
2.字体图标的两种引入方法

• 字体图标Unicode使用法
  1.引入iconfont文件夹中的iconfont.css文件

  
  
  image.png

  2.通过i标签(大部分情况下都是i标签承接字体图标)把unicode编码复制过来
  获取unicode编码方式如下，点击第一个选项Unicode，然后选择所需的图标复制代码

  
  
  image.png
  
  

  3.声明字体图标库

  
  
  image.png

• Font-class使用法
  1.引入iconfont文件夹中的iconfont.css文件
  2.通过标签承接字体图标
  类名：
  第一个类名是固定的：iconfont;
  第二个类名：通过demo_index.html文件或者项目主页面，直接去复制文字下方的类名即可
  获取类名方式如下图，点击项目里的第二个选项Font class，然后选择所需的图标复制代码

  
  
  image.png

二、平面转换 transform

transform 特点：1.tf对行内元素无效
2.tf属性提高盒子的层级，保留原来的位置---类似于相对定位的特点
属性值：
1.translate 平移——向右或者向下移动是正数，向左或向上移动是负数；
translate最常用于盒子的水平垂直居中（绝对定位元素居中）父元素加上相对定位，子元素代码如下图：

image.png

2.rotate 旋转——注意加单位度数：deg

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

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

• transform-origin——转换原点

  /* 1.取值方位名词 最多（left、top、right、bottom、center） */
  transform-origin: right bottom; 
  
  /* 2.具体的像素单位（正负均可） */
   transform-origin: -100px -100px; 
  
  /* 3.百分比(参照于盒子自身尺寸) */
  transform-origin: 30% 30%;
  

-多重转换效果——先平移后旋转

     /* 
    注意点：旋转会改变坐标轴方向
    当平移与旋转一起使用的时候，要把平移放在旋转的前面
     */
  transform: translate(600px) rotate(720deg);

3.scale()——缩放效果

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

  transform: scale(0.9);/*缩小0.9倍*/

三、渐变背景

     /* 背景颜色渐变 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, red, pink, hotpink); */
  /* background-image: linear-gradient(30deg, red, pink, hotpink); */
 background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.6));

透明：transparent