移动web第一天--字体图标，平面转换，渐变

字体图标

下载字体图标（https//www.iconfont.cn）
步骤：百度搜索iconfont--素材库或者搜索栏手速你想添加的某个字体图标的购物车--点击右上角的购物车--选择添加至项目（没有项目的要新建项目）--下载至本地，解压出来，解压的文件放在需要的根目录里

使用方法

1.unicode编码的使用：
步骤：
1.引入下载好的字体图标文件夹的iconfont.css；
2.利用空标签（大部分都是用i标签）去承接unicode编码内容；

3.声明字体图标库 font-family：iconfont。unicode编码使用

Snipaste_2022-04-01_20-24-34.png

2.font-class类名调用：
步骤：
1.引入下载好的字体图标文件夹的iconfont.css；
2.类名：

第一个类名是固定的：iconfont;

第二个类名：通过demo_index.html文件或者项目主页面，直接去复制文字下方的类名即可

Snipaste_2022-04-01_20-29-29.png

平面转换

使用transform实现元素的位移，旋转，缩放等效果。
平面转换指
1.能改变盒子在平面内的形态。
2.只能2d转换

1.transform属性位移的使用

1.位移效果transform：translate（水平移动距离，垂直移动距离）
2.取值px或者百分比， 注意：x轴正向为右边，y轴正向为下
3.translate（）如果单独给一个值，表示就是x轴的方向，单独设置某方向移动距离：translateX（）&translateY（）

4.位移translate快速实现绝对定位的元素居中效果

Snipaste_2022-04-01_20-54-06.png

百分比写法

Snipaste_2022-04-01_20-55-13.png

2.transform：rotate元素旋转效果

1.语法transform：rotate（角度 单位deg）
2.取值为正顺时针旋转，为负逆时针旋转。
3.transform-origin转换旋转原点,默认原点为盒子中心点，transform-origin：原点水平，垂直位置；取值方位名词，像素单位，百分比（按自身计算）。

4.transform复合属性，平移要在旋转前

Snipaste_2022-04-01_21-03-12.png

3.transform：scale缩放效果

1.语法transform：scale（x轴的缩放倍数，y轴缩放倍数）一般一个数值就行。
2.scale值大于1表示放大小于1表示缩小

渐变背景

使用background-image属性实现，多个颜色逐渐变化的视觉效果，一般用于盒子背景。

Snipaste_2022-04-01_21-08-26.png