一, 字体图标-Iconfont
1, 使用****字体图标****技巧实现网页中简洁的图标效果
标签法:
➢ 使用字体图标 –i 标签： 引入字体图标样式
通过i标签(大部分情况下都是i标签承接字体图标)把unicode编码复制过来
<i>引入属性</i>
类名法
➢ 使用字体图标 – 类名： 引入字体图标
➢ 调用图标对应的类名，必须调用2个类名
Ø iconfont类：基本样式，包含字体的使用等
Ø icon-xxx：图标对应的类名
伪元素法
2. 拓展:引入在线链接
二, 平面转换
1, 平面转换
Ø 改变盒子在平面内的形态（位移、旋转、缩放）
Ø 2D转换
➢ 平面转换属性
Ø transform
2, 位移
语法
Ø transform: translate (水平移动距离, 垂直移动距离);
取值（正负均可）
Ø 像素单位数值
Ø 百分比（参照物为盒子自身尺寸）
Ø 注意：X轴正向为右，Y轴正向为下
技巧
Ø写两个值,中间需要用逗号 " , " 隔开
Øtranslate() 如果只给出一个值, 表示x轴方向移动距离
Ø 单独设置某个方向的移动距离：translateX() & translateY()
转换注意点:
1.transform对于行内元素是无效的
2.添加了transform属性的盒子可以提高盒子的层级,保留原来的位置
----类似于相对定位的特点
使用translate快速实现绝对定位的元素居中效果
3, 旋转
使用****rotate****实现元素旋转效果
语法
Øtransform: rotate(角度);
Ø 注意：角度单位是deg
技巧：取值正负均可
Ø 取值为正, 则顺时针旋转
Ø 取值为负, 则逆时针旋转
4, 转换原点
使用****transform-origin****属性改变转换原点
语法
Ø 默认圆点是盒子中心点
Øtransform-origin:原点水平位置 原点垂直位置;
取值
Ø 方位名词（left、top、right、bottom、center）
Ø 像素单位数值
Ø 百分比（参照盒子自身尺寸计算）
5, 多重转换
使用****transform****复合属性实现多形态转换
多重转换技巧
< transform:transform () rotate (deg) >
多重转换原理
旋转会改变网页元素的坐标轴向
先写旋转，则后面的转换效果的轴向以旋转后的轴向为准，会影响转换结果
6, 缩放
使用****scale****改变元素的尺寸
语法
Øtransform: scale(x轴缩放倍数, y轴缩放倍数);
技巧
一般情况下,只为scale设置一个值, 表示x轴和y轴等比例缩放
Øtransform: scale(缩放倍数);
Øscale 值大于1表示放大, scale值小于1表示缩小
三, 渐变
1, 渐变背景
使用background-image属性实现渐变背景效果
Ø渐变是多个颜色逐渐变化的视觉效果
Ø一般用于设置盒子
背景颜色渐变 bgi background-image: linear-gradient(参数1 , 参数2, 参数3, ....);
参数1：（ 方位 或者 角度 ）
方位：默认的方位从上到下
1.方位名词：例如：从左到右渐变 to right,从左上到右下渐变 to right bottom
2.角度deg：直接写度数即可，不用再加to
