字体图标 位移 旋转 缩放 渐变背景色

 字体图标font

使用字体图标技巧实现网页中简洁的图标效果

字体图标的优点：

        1，灵活性：灵活的修改样式，例如：尺寸、颜色等

        2，轻量级：体积小、渲染块、降低服务器请求次数

        3，兼容性：几乎兼容所有主流浏览器

        4，使用方便

图标库：

Iconfont：https://www.iconfont.cn/ 阿里巴巴字体库(常用)

下载字体包（了解）：

登录（新浪微博） → 选择图标库 → 选择图标，加入购物车 → 购物车 → 添加至项目 → 下载至本地

字体图标:步骤1：复制相关文件到本地目录下，并引入字体图标css文件。步骤2：标签使用字体图标。

字体图标-类名引入

 1，使用字体图标 – 类名：引入字体图标样式表

<!-- 引入css -->
    <link rel="stylesheet" href="../fonts/iconfont.css">

 2，调用图标对应的类名，必须调用2个类名

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

        ·icon-xxx：图标对应的类名

<span class="iconfont icon-shouye"></span>

使用字体图标因为阿里字体库比较稳定，很多情况下，我们无需下载相关文件到本地，直接引入在线地址即可。

<!-- 记得加http: -->
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_3234864_h0da2uig6lr.css">

复制地址前面记得加上 http:

字体图标-unicode

使用字体图标 –unicode编码：

HTML

<!-- 使用一个固定类名 -->
    <span class="iconfont">&#xe600;</span>

 调用类名class=“iconfont”

使用字体图标 – 伪元素：通过查看iconfont.css文件

 i::after {
            content: '\e606';
        }

平面转换

目标：使用transform属性实现元素的位移、旋转、缩放等效果

平面转换：

        1，改变盒子在平面内的形态（位移、旋转、缩放）

        2，2D转换

平面转换属性：

        transform

目标：使用translate实现元素位移效果

语法：

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

取值（正负均可