移动wed第一天

字体图标

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

unicode编码的使用：

步骤：
1.引入下载好的字体图标文件夹的iconfont。css；
2.利用空标签（大部分使用i标签）去承接unicode编码内容；
3.声明字体图标库 font-family:icinfont

字体图标-unicode.png

font-class类名调用：

步骤：
1.引入下载好的字体图标文件夹的iconfont.css；
2.类名：
第一个类名是固定的：iconfont；
第二个类名：通过demo-index,html文件夹或者项目主页面，直接复制文字下的代码

字体图标-类名.png

平面转换

位移基本使用

transform: translate(水平移动距离, 垂直移动距离);
取值：（正负均可）
像素单位数值 百分比
（参照物为盒子自身尺寸）
注意：X轴正向为右，Y轴正向为下
技巧：
translate()如果只给出一个值, 表示x轴方向移动距离
单独设置某个方向的移动距离：translateX() & translateY()

平面转换-位移.png

位移基本使用.png

位移绝对定位居中

位移取值为百分比数值，参照盒子自身尺寸计算移动距离

位移-绝对定位.png

旋转

语法
transform: rotate(角度);
注意：角度单位是deg
技巧：取值正负均可
取值为正, 则顺时针旋转
取值为负, 则逆时针旋转

转换原点

语法
默认圆点是盒子中心点
transform-origin: 原点水平位置 原点垂直位置;
l 取值
方位名词（left、top、right、bottom、center）
像素单位数值
百分比（参照盒子自身尺寸计算）

平面转换-转换原点.png

渐变

渐变背景

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

背景颜色-渐变.png