引入阿里巴巴字体图标库

1. 字体图标

什么是字体图标？

一种处理简单、单一颜色的图片，例如例如搜索框里的“搜索”放大镜：

以及转发网页链接的图标等等。

字体图标展示的是图标，其本质是字体。

字体图标的优点：

轻量：渲染快、体积小、可以有效降低服务器请求次数。
灵活：颜色、尺寸等样式可以修改。
兼容性强：几乎兼容所有主流浏览器。
使用方便：下载字体包即可使用字体图标。

附：阿里巴巴矢量图标库：https://www.iconfont.cn/

字体图标的下载:

登录阿里巴巴矢量图标库，选择需要的图标库。

再选择需要的图标，添加至购物车。

在购物车里把图标们添加至项目，并下载到本地。

字体图标的使用①——Unicode编码：

引入iconfont.css外部样式表。

复制粘贴图标对应的Unicode编码。

再给标签内的文字设置文字字体。

字体图标的使用②——类名：

引入iconfont.css外部样式表，如图所示的。

调用图标对应的类名，且必须调用两个类名。

iconfont类：基本样式，包含字体的使用等。

icon-xxxx:图标对应的类名。

两种使用方法演示如下：

打开浏览器查看效果：

补充：

如果图标库没得项目需要的图标，你就去找设计师妹妹拿SVG矢量图，然后到IconFont网站上上传图标，再下载使用。（大屑）

2. 平面转换

什么是平面转换？

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

1. 平面转换——位移translate

语法：

transform:translate(水平移动距离，垂直移动距离)
取值可为像素单位数值或百分比
X轴正向为右，Y轴正向为下

transform: translate(100px,200px);
transform: translateX(50%);
transform; translateY(-200);

translate应用——绝对定位居中

position: absolute;
left: 50%;/*位移取值为百分比数值，参照盒子自身尺寸计算移动距离*/
top: 50%;
transform: translate(-50%,-50%);

2. 平面转换——旋转rotate

语法：

transform:ratate(角度)
取值为正，顺时针旋转。
取值为负，逆时针旋转。

img:hover {
            /* 顺时针 */
            transform: rotate(360deg);

            /* 逆时针 */
            /* transform: rotate(-360deg); */
        }

3. 平面转换——转换原点transform-orgin

语法：

transform-origin: 原点水平位置原点垂直位置;
默认原点是盒子中心，可配合旋转、缩放使用。
取值可为方位名词left、right、top、buttom、center。
取值可为像素单位。
取值可为百分比（参照盒子自身尺寸）。

transform-origin: left bottom;
transform-origin: 50px 60px;
transform-origin: 50% 50%;

4. 平面转换—缩放scale 缩放可以改变元素的尺寸

语法：

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

.box:hover img {
            transform: scale(0.5);
            /*transform: scale(1.5);*/
        }

5. 平面转换—多重转换 使用transform符合属性实现多形态转换，要注意属性的顺序。

例：

/*边走边转——轮子*/
transform: translate(600px) rotate(1440deg);

/*螺旋旋转*/
transform: rotate(360deg) translate(100px);/* 旋转可以改变坐标轴向 */

3. 渐变

渐变是多个颜色线性变化的视觉效果，常用于设置盒子的背景。

background-image: linear-gradient(
                pink,/*颜色1*/
                green,/*颜色2*/
                hotpink/*颜色3*/
            );
background-image: linear-gradient(
                transparent,/*透明的*/
                rgba(0,0,0, .6)
            );