iconfont图标、平面转换、颜色渐变

一、iconfont图标使用步骤

1.打开阿里巴巴矢量图标库，查找自己需要的图标。

2.点击下载，添加至项目

3.两种方法：下载至本地、生成线上链接(注意在生成链接后前面添加http：)

4.下载至本地后解压该文件，在文件中link引入iconfont.css文件

5.使用方法

<i class="iconfont xxx"></i>

iconfont图标上传图标使用

需求：图片必须为svg格式的图片

二、平面转换 （transform）

使用transform属性实现盒子在平面内的位移、旋转、缩放

平面坐标轴：x轴（向右）、y轴（向下）

注意：配合过渡属性进行使用

一、位移

transform: translate（水平移动距离，垂直移动距离）

注意：逗号隔开，若只设置一个值，则表示X轴的值

取值方式：数字+px 百分比（相对于自身的宽高）

单独设置朝一边位移：

transform:translateX(100px);
transform:translateY(100px);
//X和Y需要大写

水平垂直居中实现方式（面试）

div{
    position:absolute;
    top:50%;//相对于父元素移动50%
    left:50%;
    transform:translate(-50%,-50%)//相对于自身宽高移动50%
}

双开门马萨拉蒂案例࿱