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%
}

双开门马萨拉蒂案例：

1设置大盒子，将背景图设置上去

2大盒子里面设置两个小盒子，利用浮动，一个靠左，一个靠右

3利用hover伪类选择器使左边盒子transform：translateX（-100%）、右边盒子transform：translateX（100%）

注意：因左右两个盒子在一张图片，可以使用背景位置属性：background-position：right 0

.box:hover::after 这种写法表示盒子被hover之后的.box::after 此时.box:hover为一个整体

二、旋转

img{width:250px;transition:all 2s
}
img:hover {
transform：rotate（360deg）；
//注意在使用旋转属性时需要配合 过渡属性使用 旋转属性的单位是deg
}

转换原点：

默认状态下转换圆点是盒子中心点

transform-origin:right bottom

取值：1、方位名词（主要使用）

2、数字+px

3、百分比

三、多重转换

transform复合属性使用方法：

transform：translate(600px) rotate（360deg）；
//注意：在使用复合属性时，需要将位移放在旋转前面。原因：旋转会改变坐标轴方向
在连续使用transform属性时，需要复合书写。单独书写时，上面生效，下面的不生效原因：层叠性

四、缩放

transform：scale（缩放倍数）

注意：配合过渡属性使用

将图片设置宽高，并设置overflow：hidden属性，可以将图片在盒子内进行缩放效果

五、渐变背景

background-image：linear-gradient（to right // 从左向右过渡颜色1，        //  transparent，      颜色2         // rgba（0，0，0，0.6））；              透明~半透明