一、字体图标

1.什么是字体图标？

• 
• 字体图标展示的是图标，本质是字体
• 用于处理简单的、颜色单一的图片场景

2.字体图标的优势

• 灵活性：利用CSS语法灵活地修改样式，例如：尺寸、颜色等；
• 轻量级：体积小、渲染快、降低服务器请求次数；
• 兼容性：几乎兼容所有主流浏览器；
• 使用方便: 下载 => 根据教程使用 => 当作字体去控制；

3.字体图标的使用

1. 进入图标库网站( Iconfont：www.iconfont.cn/ )或其他网站。
2. 手机号注册登录；
3. 搜索关键词，在图标库里挑选；
4. 选中图标后点击添加购物车；
5. 击购物车添加所选中的图标到项目(或新建项目)；
6. 下载至本地；
7. 根据demo_index.html(教程) 提示使用；

二、平面转换

• transform属性： 实现元素的位移、旋转、缩放等效果；
• 作用：改变盒子在平面内的形态；

1.平面坐标

• 二维坐标系中：
• 水平方向（x轴）：向右为正值，向左为负值；
• 垂直方向（y轴）：向下为正值，向上为负值；
• 

2.平面位移

• 使用translate实现元素位移效果；
• translate[平移]

语法：

• transform: translate( X轴=>水平移动距离, Y轴=>垂直移动距离)；

取值：

• px (正负均可)；
• 百分比（是参照盒子自身尺寸计算）；

注意点：

• translate(50px) 如果只填写一个参数, 代表X轴；
• 可设置单个方向的位移: translateX() 和 translateY()；

3.平面旋转

• rotate：实现元素旋转效果；
• 

语法：

• transform: rotate( 角度);

取值：

• deg(角度) => degree的缩写

注意点：

• rotate(80deg) 取值为正, 则顺时针旋转；
• rotate(-80deg) 取值为负, 则逆时针旋转；

4.转换原点

• transform-origin：改变转换原点；

语法：

• transform-origin: 原点水平位置 原点垂直位置;
• 默认原点是盒子中心点

取值：

• 方位名词（left、top、right、bottom、center）
• px
• 百分比（参照盒子自身尺寸计算）

5.多重转换

• 使用transform复合属性实现多形态转换；

语法：

• transform: translate(距离) rotate(度数)；

注意点：

• 旋转会改变元素的坐标轴向；
• 一般 先位移 再旋转；

6.平面缩放

• scale：改变元素的尺寸；
• scale[比例]

语法：

• transform: scale(x轴缩放倍数, y轴缩放倍数);

取值：

• 通常情况下，只为scale设置一个值, 表示x轴和y轴等比例缩放；
• transform: scale(缩放倍数);
• 大于1表示放大；
• 小于1表示缩小；

三、线性渐变

• 作用：实现盒子背景由多个颜色逐渐变化的视觉效果；
• 

语法：

• background-image: linear-gradient( 颜色1, 颜色2, 颜色3... )
• linear[线性的] gradient[渐变]

注意点：

• 默认渐变方向为 从上往下；
• 常见的遮罩层渐变颜色取值为: 从透明渐变到黑色半透明效果；
• background-image: linear-gradient(transparent, rgba(0, 0, 0, .8));
• 

拓展

1.更改渐变方向

• 例如: 从左往右
• background-image: linear-gradient(to right, pink, skyblue);
• 例如: 从左下到右上
• background-image: linear-gradient(to right top, pink, skyblue);

2.更改渐变角度

• 例如: 逆时针 90度
• background-image: linear-gradient(90deg,pink,skyblue);