字体图标和平移和渐变的基本使用字体图标iconfont和transfor属性来实现位移，旋转，缩放，和渐变backgro

字体图标

字体图标展示的是图标，本质是字体
处理简单的颜色单一的图片

优点

灵活，随时修改颜色和尺寸(color font-size)
轻量级，体积小
兼容性好

引入方式

**注意：**这里使用的是从网上下载到本地的图标库来引入

Unicode编码引入

先引入图标的样式表 iconfont.css
复制对应的的Unicode粘贴到元素里
设置文字的字体（不设置不生效）

<!-- 引入字体图标css样式 -->
<link rel="stylesheet" href="./iconfont/iconfont.css">
<style>
    i {
        font-family: 'iconfont'; //必须要添加这行样式，要不不能生效
        color: red;
        font-size: 50px;
    }
</style>
<!-- 编码式引入 -->
<i>&#xe8ab;</i>

font-class类名引入

引入字体图标样式表
调用图标对应的类名，必须是调用两个类名
- iconfont类：基本样式，包含字体的使用等
- icon-xxx：图标对应的类名
行内元素

<!-- 引入字体图标css样式 -->
<link rel="stylesheet" href="./iconfont/iconfont.css">
<style>
    .s1 {
            color: red;
            font-size: 50px;
        }
</style>
 <!-- 类名引入 一定要有iconfont这个类名，要不不生效 -->
<span class="iconfont icon-aixin s1"></span>

字体图标拓展

上传矢量图

使用场景:但我们没有字体图标和网上的字体图标不适用时，或者项目只给SVG图标时

上传SVG图标

2. 去除图标颜色

3. 下载使用

平面转换

使用transform属性实现元素的位移，旋转，缩放

位移

语法

transform:translate(水平移动距离，垂直移动距离)
```
 transform: translate(100px, 0px);
```
transform:translateX(移动距离) → 水平移动
```
transform: translateX(100px);
```
transform:translateY(移动距离) → 垂直移动
```
transform: translateY(100px);
```

取值

像素单位数值px

transform: translate(100px, 0px);

百分比（参照盒子自身尺寸）%

transform: translate(100%, 0);

注意

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

<!-- 向右移动100px,负值表示向左 -->
transform: translate(100px);
<!--向右移动移动自身宽度100%，负数表示向左  -->
transform: translate(100px, 0px);

拓展

实现盒子的水平垂直居中有两种方法：

绝对定位和外边距（在实际开发中宽高可能会变化，不推荐使用）

<style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .box {
            position: relative;
            width: 400px;
            height: 400px;
            background-color: pink;
            margin: 0 auto;

        }

        .sun {
            position: absolute;
            top: 50%;
            left: 50%;
            /* 自身盒子宽高的一半  */
            margin-top: -100px;
            margin-left: -100px;
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
    </style>
    <div class="box">
        <div class="sun"></div>
    </div>

绝对定位和位移(推荐)

<style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .box {
            position: relative;
            width: 400px;
            height: 400px;
            background-color: pink;
            margin: 0 auto;

        }

        .sun {
            position: absolute;
            top: 50%;
            left: 50%;
            /*移动自身盒子的一半*/
            transform: translate(-50%, -50%);
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
    </style>
    <div class="box">
        <div class="sun"></div>
    </div>

旋转

语法

transform:rotate(角度)

注意

角度一定要带单位（deg）
取值可以是正负值
取正值时，顺时针旋转
取负值时，逆时针旋转

<style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        img {
            display: block;
            transition: 1s;
            margin: 100px auto;
        }

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

        }
    </style>

转换原点

语法

transform-origin:原点水平位置原点垂直位置；

取值

方位名词（left、top、right、bottom、center）
```
/*右下角*/
transform-origin: right bottom;
```
像素单位数值

transform-origin: 100px 0;

百分比（参照盒子自身尺寸）

/*右下角*/
transform-origin: 100% 100%;

缩放

语法

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

注意

一般情况下，scale只设置一个值，表示x轴和y轴等比例缩放
scale的值大于1表示放大，小于1表示缩小

<style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .box {
            width: 600px;
            height: 600px;
            background-color: skyblue;
            border: 10px solid pink;
            margin: 200px auto;
            overflow: hidden;
        }

        img {
            display: block;
            transition: 2s;
        }

        .box:hover img {
        	/*缩放1.5倍*/
            transform: scale(1.5);
        }
    </style>
    <div class="box">
        <img src="图片地址" alt="">
    </div>

渐变

语法

background-image: linear-gradient(颜色1，颜色2);

注意

一定要给背景图片添加不是背景颜色（渐变不止是一种颜色）

background-image: linear-gradient(red,blue)

渐变可以设置多种颜色

background-image: linear-gradient(red,green,blue)

可以划分渐变的大小

/* 从上到下 红色渐变自身高度30%，绿色从30%-50%渐变，蓝色从50&-100%渐变*/
background-image: linear-gradient(red 30%,green 50%,blue 100%)

可以改变渐变方向

默认值to bottom 从上到下

background-image: linear-gradient(red,blue)

从下到上

background-image: linear-gradient(to top red,blue)

从左上角到右下角

background-image: linear-gradient(to right top red,blue)

角度

background-image: linear-gradient(0deg red,blue)