字体图标
字体图标展示的是图标，本质是字体。处理简单的、颜色单一的图片。
字体图标的优点：
灵活性：灵活地修改样式，例如：尺寸、颜色等
轻量级：体积小、渲染快、降低服务器请求次数
兼容性：几乎兼容所有主流浏览器
使用方便：
1. 下载字体包
2. 使用字体图标
图标库
Iconfont：https://www.iconfont.cn/
下载字体包：
登录（新浪微博） → 选择图标库 → 选择图标，加入购物车 → 购物车 → 添加至项目 → 下载至本地
使用字体图标 - Unicode编码：
引入样式表：iconfont.css
复制粘贴图标对应的Unicode编码
设置文字字体
上传矢量图：
l 思考：如果图标库没有项目所需的图标怎么办？
l 答：IconFont网站上传矢量图生成字体图标
Ø 1. 与设计师沟通，得到SVG矢量图
Ø 2. IconFont网站上传图标，下载使用
作用：使用字体图标技巧实现网页中简洁的图标效果
通过i标签(大部分情况下都是i标签承接字体图标)把unicode编码复制过来
引入方式：
1.文件夹引入：将阿里巴巴矢量图标库：iconfornt 下载到根目录引入到css
2.类名引入：通过标签承接字体图标
类名：
第一个类名是固定的：iconfont;
第二个类名：通过demo_index.html文件或者项目主页面，直接去复制文字下方的类名即可
3.伪元素导入方式： 在content内容中，填充该字体图标的unicode编码，然后把前面三个字符和后面的分好去掉，在最前面添加 \ 《 \ 作用编译 》
4.在线引入字体图标：直接在link里面写入阿里巴巴矢量图标库网站链接的css元素
平面转换
1.平面转换
Ø 改变盒子在平面内的形态（位移、旋转、缩放）
Ø 2D转换
l 平面转换属性
Ø transform
语法
Ø transform: translate(水平移动距离, 垂直移动距离);
l 取值（正负均可）
Ø 像素单位数值
Ø 百分比（参照物为盒子自身尺寸）
注意：X轴正向为右，Y轴正向为下
l 技巧
Ø translate()如果只给出一个值, 表示x轴方向移动距离
Ø 单独设置某个方向的移动距离：translateX( ) & translateY( )
右侧盒子背景图
Ø left：向左侧移动自身宽度
Ø right：向右侧移动自身宽度
使用rotate实现元素旋转效果
语法
Ø transform: rotate(角度);
注意：角度单位是deg
l 技巧：取值正负均可
Ø 取值为正, 则顺时针旋转
Ø 取值为负, 则逆时针旋转
使用transform-origin属性改变转换原点
语法
Ø 默认圆点是盒子中心点
Ø transform-origin: 原点水平位置 原点垂直位置;
l 取值
Ø 方位名词（left、top、right、bottom、center）
Ø 像素单位数值
Ø 百分比（参照盒子自身尺寸计算）
使用transform复合属性实现多形态转换
多重转换原理
Ø 旋转会改变网页元素的坐标轴向
Ø 先写旋转，则后面的转换效果的轴向以旋转后的轴向为准，会影响转换结果
使用scale改变元素的尺寸
思考: 改变元素的width或height属性能实现吗？
l 语法
Ø transform: scale(x轴缩放倍数, y轴缩放倍数);
l 技巧
Ø 一般情况下, 只为scale设置一个值, 表示x轴和y轴等比例缩放
Ø transform: scale(缩放倍数);
Ø scale值大于1表示放大, scale值小于1表示缩小
使用scale改变元素的尺寸
播放按钮
Ø 布局
Ø ::after
Ø 样式
Ø 居中
Ø 效果
Ø 缩放
Ø 透明度（opacity）
渐变
使用background-image属性实现渐变背景效果
渐变是多个颜色逐渐变化的视觉效果
l 一般用于设置盒子的背景
