字体图标（ 目的：使用字体图标技巧实现网页中简洁的图标效果）
字体图标展示的是图标，本质是字体，处理简单的、颜色单一的图片
优点：灵活性：灵活的修改样式，例如：尺寸，颜色等
轻量级：体积小，渲染快，降低服务器请求次数
兼容性：几乎兼容所有主流浏览器
使用方便：1.下载字体包 2.使用字体图标
使用字体图标-类名：
引入字体图标样式表
<link rel="stylesheet" href="./iconfont/iconfont.css"> 调用图标对应的类名，必须调用2个类名 iconfont类：基本样式，包含字体的使用等 icon-xxx：图标对应的类名 上传矢量图：如果图标库没有项目所需的图标怎么办？（iconfont网站上传矢量图生成字体图标） 1.与设计师沟通，得到SVG矢量图 2.iconfont网站上传图标，下载使用 上传——>上传SVG图标 浏览本地图标——>去除颜色提交 加入购物车——>下载使用平面转换（目的：使用transform属性实现元素的位移、旋转、缩放等效果）
平面转换：改变盒子在平面内的形态（位移[常用]、旋转[不常用]、缩放[常用]） 2D转换
平面转换属性：transform
位移：（使用translate实现元素位移效果）
语法：transform: translate(水平移动距离,垂直移动距离);
取值（正负即可）:像素单位数值，百分比（参照物为盒子自身尺寸）注意：X轴正向为右，Y轴正向为下
技巧: translate() 如果只给出一个值，表示x轴方向移动距离 单独设置某个方向的移动距离：translateX() & translateY()
旋转：（使用translate实现元素旋转效果）（旋转效果必须配合过渡）
语法：transfrom: rotate(角度); 注意：角度单位是deg
技巧：取值正负即可（取值为正，则顺时针旋转，取值为负，则逆时针旋转）
转换圆点：（使用transform-origin属性改变转换圆点）
语法：默认圆点是盒子中心点 transform-origin: 原点水平位置 原点垂直位置;
取值：方位名词（left、top、right、bottom、center） 像素单位数值 百分比（参照盒子自身尺寸计算）
/* 添加给标签本身，不要加到hover */ /* transform-origin: right bottom; */右下角 transform-origin: left bottom; 左下角 多重转换：（使用transform复合属性实现多形态转换） 多重转换技巧：transform: translate() rotate(); （不能改变先后顺序：旋转会改变坐标轴向，先旋转改变了坐标轴向，位移方向会受影响--多重转换如果涉及到旋转往最后在书写） /* transform: translate(600px); transform: rotate(720deg); */单独设置会发生层叠 缩放：（使用scale改变元素的尺寸） 思考：改变元素的width或height属性能实现吗？能够放大图片效果，但是不是我们想要的效果 语法：transform: scale(x轴缩放倍数,y轴缩放倍数) 技巧：一般情况下，只为scale设置一个值，表示x轴和y轴等比例缩放（transform: scale(缩放倍数); scale值大于1表示放大，scale值小于1表示缩小）渐变背景：（使用background-image属性实现渐变背景效果）
渐变是多个颜色逐渐变化的视觉效果，一般用于设置盒子的背景
background-image: linwar-gradient(颜色1,颜色2);
/* 半透明渐变：transparent透明-rgba() */ background-image: linear-gradient( transparent, rgba(0,0,0,.5) ); 标签：scale,缩放,transform,旋转,字体,No.2,图标 From： https://www.cnblogs.com/renzlllj/p/17158518.html