字体图标、平面转换、渐变字体图标基本使用图标库：Iconfont：https://www.iconfont.cn/

字体图标

基本使用

图标库：Iconfont：www.iconfont.cn/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入iconfont.css  -->
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <style>
        <!-- 设置span标签的字体 -->
        span {
            font-family: 'iconfont';
        }

        .s1 {
            font-size: 50px;
        }
    </style>
</head>
<body>
    <!-- 通过i标签把unicode编码复制过来 -->
    <span class="s1">&#xe600;<span>
</body>
</html>

iconfont类

 <!-- 引入iconfont.css文件 -->
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <span class="iconfont icon-yanjing s1"></span>

font-class实现原理：

  给对应的标签添加一个**伪元素**，这个伪元素设置**content**属性，属性值等于字体图标**unicode**编码。

平面转换

平面转换概念
目标：使用transform属性实现元素的位移、旋转、缩放等效果。

位移

使用translate实现元素位移效果。

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

X轴正向为右、负向为左，Y轴正向为下、负向为上

定位盒子居中

使用translate快速实现绝对定位的元素居中效果

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);

平面转换旋转

使用rotate实现元素旋转效果。

角度单位是deg

img:hover {
    /* 鼠标放上去旋转360度 */
    transform: rotate(360deg);
}

转换原点

使用transform-origin属性改变转换原点。

transform-origin: 原点水平位置原点垂直位置;
```
/* 把中心点取在图片左下角 */
transform-origin: left bottom;
```
多重转换

使用transform复合属性实现多形态转换。
```
 /* 位移+旋转 */
transform: translate() rotate();
```
缩放

使用scale改变元素的尺寸。

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

渐变

使用background-image属性实现渐变背景效果。

.box .mask {
    position: absolute;
    width: 384px;
    height: 271px;
    top: 0;
    /* 变透明 */
    opacity: 0;
    transition:  1s;
    background-image: linear-gradient
        (transparent,rgba(0,0,0, .5));
}

/* 鼠标移动显示 */
.box:hover .mask {
    opacity: 1;
}

字体图标、平面转换、渐变

字体图标

平面转换

位移

定位盒子居中

平面转换旋转

转换原点

多重转换

缩放

渐变