字体图标

字体图标Unicode使用法

1.引入iconfont文件夹中的iconfont.css文件
2.通过i标签（大部分情况都是i标签承接字体图标）把unicode编码复制过来
3.声明字体图库标

unicode使用法.png

字体图标Font-class使用法

1.引入iconfont.css文件
2.通过标签承接字体图标
类名：
第一个类名是固定的：iconfont;
第二个类名：通过demo_index.html文件或者项目主页面直接去复制文字下方的类名即可

font-class使用法.png

平面转换

使用transform属性实现元素的位移、旋转、缩放等效果

位移的基本使用

transition:过渡
tf像素单位取值：
X：水平方向
Y：垂直方向
transform:translateX（100px）
transform:translateY（100px）

tf百分比取值：参考盒子自身大小
transform:translateX（50%）
transform:translateY（100%）

位移的连写：中间逗号隔开
transform:translate(100px,50px)

注意点：
1.tf属性对于行内元素是无效的
2.添加了tf属性的盒子可以提高盒子层级，保留原来的位置--类似于相对定位的特点
3.transform:translate只取一个值代表X

绝对定位元素居中

transform:translate使用自身百分比位移

绝对定位元素居中.png

旋转效果

transform:rotate(...deg)

/* 顺时针旋转 360deg /
transform: rotate(360deg);
/ 逆顺时针旋转 360deg */
transform: rotate(-360deg);

转换原点

/* 1.取值方位名词 最多 tfo/
transform-origin: right bottom;
/ 2.具体的像素单位（正负均可） /
transform-origin: -100px -100px;
/ 3.百分比(参照于盒子自身尺寸) */
transform-origin: 50% 50%;

多重转换效果

当平移与旋转一起使用的时候，要把平移放在旋转的前面
否则旋转会改变坐标轴方向

渐变

背景颜色渐变 bgi background-image: linear-gradient(参数1, 参数2, 参数3, ....);
参数1：
方位：默认的方位从上到下
1.方位名词：例如：从左到右渐变 to right,从左上到右下渐变 to right bottom
2.角度deg：直接写度数即可，不用再加to