字体图标

下载方法

1.图标库下载地址：https://www.iconfont.cn/
2.选择图标库 2. 选择图标3.加入购物车 4.添加至项目下载至本地

使用方法

1.Unicode编码

1.引入样式表：iconfont.css

2. 复制粘贴图标对应的Unicode编码:<i>&#xe62b</i>
   3.设置文字字体，字体家族font-family: iconfont

2.使用字体图标 – 类名

1.引入样式表：iconfont.css
2.调用图标对应的类名，必须调用2个类名

iconfont类：基本样式，包含字体的使用等
icon-xxx：图标对应的类名 :<i class="iconfont icon-zhaoxiangji xj"></i>

3.在线引入字体图标

1.在线引入字体图标，要在链接前面添加 http:
<link rel="stylesheet" href="https://at.alicdn.com/t/font_3294705_7kyv146p6m2.css">
2.调用图标对应的类名，必须调用2个类名

iconfont类：基本样式，包含字体的使用等
icon-xxx：图标对应的类名 :<i class="iconfont icon-zhaoxiangji xj"></i>

平面转换

位移

transform: translate(水平移动距离, 垂直移动距离);{X轴正向为右，Y轴正向为下}

位移-绝对定位居中

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

旋转

transform: rotate(90deg);{取值为正, 则顺时针旋转
, 取值为负, 则逆时针旋转}

转换原点

transform-origin: 原点水平位置 原点垂直位置;{ left、top、right、bottom、center}

transform复合属性

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

缩放

transform: scale(缩放倍数)=(x轴缩放倍数, y轴缩放倍数),{正常为1，大于1等比例放大，小于1等比例缩小

透明度（opacity)值为{0-1}

渐变

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

        1.方位名词：例如：从左到右渐变 to right,从左上到右下渐变 to right bottom
        2.角度deg：直接写deg度数即可，不用再加to

background-image: linear-gradient(to right, transparent(透明), #e43232, #91ca1f);