一、字体图标

字体图标主要用于网页中通用、常用的一些小图标；

精灵图的缺点：1、图片文件大； 2、图片放大和缩小会有失真的问题； 3、一旦图片制作完成想要更换非常复杂。

字体图标iconfont，展示的是图标，但是本质是字体；字体就可以调整字体大小（不失真），改变文字。

字体图标优点：

1、一个字体图标比一系列的图片小，一旦字体加载的了，图标马上就会渲染出来，减少了服务器请求。

2、灵活：可改颜色、大小。

3、兼容性：几乎支持所有的浏览器。

但是，字体图标不能替代精灵图，字体图标的样式结构简单，遇到复杂的背景图片，还是需要精灵图。

1.1 字体图标的使用

1、下载字体图标。

第一个网址（国外的服务器，速度较慢）：Icon Font & SVG Icon Sets ❍ IcoMoon

第二个网址：iconfont-阿里巴巴矢量图标库

阿里巴巴的，好用，强推！

第一步，打开iconmoon网站。

第二步：点击红圈选中区域。

然后就会看到如下图所示的页面，会看到很多图标：

第三步，喜欢哪个选中哪个，点击之后还有提示，

如果这些里面都没有我想要的，就点击下图中的红圈部分：

进入下图界面以后，选择自己想要的，就可以点击Add：

还可以对选择的图标进行编辑，旋转缩放等。

第四步，选好了以后，点击下图的红圈部分，生成字体：

下载字体：

把下载下来的压缩包解压，在众多文件夹中最重要的就是fonts文件夹；fonts文件夹放在页面根目录。

以上是用第一个网址下载的，用第二个阿里巴巴的网站的时候，是先选中图标，加入购物车，然后点购物车的图标，去购物车里面下载，这里点添加项目，再下载。

2、引入字体图标（以阿里巴巴的网址下载的字体图标为例子）

第一步，给解压后的文件夹改名为iconfont.（iconfont文件夹里面有iconfont.css文件）

第二步，在要引入的页面的html文件写link；

<link rel="stylesheet" href="./iconfont/iconfont.css">

第三步，在body里面写行内标签；

第一个类名必须叫iconfont（因为在iconfont.css文件中有iconfont类，这个类里面有font-family,还有一些其他属性，有这个类，就不会一调用就是个小方块），第二个类名叫什么？打开如下图选中的文件夹

打开这个html文件（必须要联网），然后切换到Font class，

每个图标下面的.ico什么什么的就是类名。 html中写类名不要那个点，css中才要。

<i class="iconfont icon-favorites-fill"></i>

总结：下载字体图标，link引入样式表，写类名调用样式表中的具体某个图标。

注意：用i标签是改不了字体图标大小的，这个标签的优先级小于iconfont类标签，所以要在类标签里面改。

如果工作中的图标在iconfont里面没有，可以上传矢量图（后缀名是svg）：

1、打开iconfont，点击红色圈住的图标：

点击上传图标：

选择对应的svg图片传上去，之后点提交，可以点去除颜色提交，也可以点保留颜色提交；

然后加入购物车，再下载下来。

二、平面转换（属性都是transform）

平面+转换：平面就是由x和y坐标轴组成的平面；转换就是2D转换（包括位移、旋转、缩放）。

坐标图：

属性：transform

1、位移

transform: translate(水平移动距离, 垂直移动距离)

取值（正负均可）：像素单位数值；百分比（参照物为盒子自身尺寸）

translate()如果只给出一个值, 表示x轴方向移动距离；

单独设置某个方向的移动距离：translateX() & translateY()。（X、Y是大写）

想要鼠标移动到父级盒子，子级盒子位移：

.father:hover .son {
            /* transform: translate(100px, 50px); */

            /* 百分比: 盒子自身尺寸的百分比 */
            /* transform: translate(100%, 50%); */

            /* transform: translate(-100%, 50%); */

            /* 只给出一个值表示x轴移动距离 */
            /* transform: translate(100px); */

            transform: translateY(100px);
        }

关于绝对居中：

若是两个盒子都是div，可以用margin来居中；

但是如果用了定位，就不能用margin居中了，用transform;

.father {
            position: relative;
            width: 500px;
            height: 300px;
            margin: 100px auto;
            border: 1px solid #000;
        }
        
        .son {
            position: absolute;
            left: 50%;
            top: 50%;
            /* margin-left: -100px;
            margin-top: -50px; */

            transform: translate(-50%, -50%);

            width: 203px;
            height: 100px;
            background-color: pink;          
        }

2、旋转

transform: rotate(角度);

角度单位是deg，取值正负均可，取值为正, 则顺时针旋转；取值为负, 则逆时针旋转。

转换原点：

默认圆点是盒子中心点；

transform-origin: 原点水平位置原点垂直位置;（这里是空格隔开）

属性的取值可以是：

方位名词（left、top、right、bottom、center），像素单位数值，百分比（参照盒子自身尺寸计算）

多重转换：

想要既有位移的转换，又有旋转的转换；

/* 边走边转 */
transform: translate(600px) rotate(360deg);

transform这里是复合属性，用空格隔开，必须先写位移的translate，再写rotate。

不能先写旋转，因为如果先旋转，x轴和y轴会变方向，位移就会出问题。

3、缩放

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

一般情况下, 只为scale设置一个值, 表示x轴和y轴等比例缩放；

transform: scale(缩放倍数);

scale值大于1表示放大, scale值小于1表示缩小；

4、渐变

渐变是多个颜色逐渐变化的视觉效果；

一般用于设置盒子的背景；

 background-image: linear-gradient(
                transparent,
                rgba(0,0,0, .6)
            );

上面的代码就是说从透明变到透明度为0.6的黑色。

CSS——字体图标、平面转换、缩放