字体图标+平面转换+渐变我的前端基础笔记，涉及内容有“字体图标+平面转换+渐变”。刚开始有点生疏，内容总结方面不会很理

字体图标

介绍：

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

字体包的下载：

在线字体图标用法：

登录iconfont官网，选取我的项目
依步骤进行选择，然后再复制链接
到vsc里引入样式，记得加前缀

字体图标的用法：

方法1使用字体图标-Unicode编码：

引入下载好的样式表：iconfont.css

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

复制粘贴图标对应的Unicode编码
```
<span>&#xe6f8;</span>
```

设置文字字体

<style>
        span {
            font-family: 'iconfont';
        }
    </style>

方法2使用字体图标-类名：

引入下载好的字体图标样式表

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

调用图标对应的类名，必须调用2个类名
1. iconfont类：基本样式，包含字体的使用等
2. icon-xxx：图标对应的类名
```
<span class="iconfont icon-xxx"></span>
```

思考：如果图标库没有项目所需的图标怎么办？

答：IconFont网站上传矢量图生成字体图标

与设计师沟通，得到SVG矢量图
IconFont网站上传图标，下载使用
视频教程：

平面转换

目标：

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

transform具有层叠属性-最好不要分开写。

平面转换：

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

平面转换属性:

位移：

目标：

使用translate实现元素位移效果

语法

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

<style>
 .b {
            transform: translate(50%, 50%);
        }
</style>

取值（正负均可）

像素单位数值
百分比（参照物为盒子自身尺寸）
注意：X轴正向为右，Y轴正向为下

技巧

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

<style>
.b {
            transform: translate(-50%); 
        }
</style>

单独设置某个方向的移动距离：translateX() & translateY()

<style>
.b {
            transform: translateX(-50%); 
        }
</style>

旋转：

目标：

使用rotate实现元素旋转效果

语法：

transform: rotate(角度);

注意：角度单位是deg

技巧：

取值正负均可

取值为正, 则顺时针旋转
取值为负, 则逆时针旋转

转换原点：

技巧：

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

语法：

默认圆点是盒子中心点
transform-origin: 原点水平位置原点垂直位置;

取值：

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

多重转换：

目标：

使用transform复合属性实现多形态转换

技巧：

<style>
img {
            transform: translate() rotate();
        }
</style>

多重转换原理:

旋转会改变网页元素的坐标轴向
先写旋转，则后面的转换效果的轴向以旋转后的轴向为准，会影响转换结果
注意：先写走动，再写旋转。

缩放（整体缩放）---不会占用位置

目标：

使用scale改变元素的尺寸

语法：

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

技巧：

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

transform: scale(缩放倍数);
scale值大于1表示放大, scale值小于1表示缩小

播放按钮

布局： ::after

样式：居中

效果：

缩放
透明度(opacity)，取值”0-1“

渐变

目标：

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

介绍：

渐变是多个颜色逐渐变化的视觉效果
一般用于设置盒子的背景

语法：

<style>
    div{
            background-image: linear-gradient(
                颜色1,
                颜色2,
                ....,
            );
        }</style>

<style>
div{
            background-image: linear-gradient(
                transparent,
                rgba(0,0,0,.6)
            );
        }
</style>

注意点：

渐变拓展

分层的渐变效果：

  /*    盒子上下划分 高度  100% 
        0% - 30%  black
        30% - 50%  black - red
        50% - 80%  red - blue
        80% - 100% blue
         */
        div {
            background-image: linear-gradient(
                    black 30%,
                    red 50%,
                    blue 80%,
                    blue 100%);
        }

渐变的变化方向的改变：

1、方位名词：

to top（自下往上）；to bottom（默认）； to left.....

to top right（自左下往右上）.....

2、角度（deg）

div {
            background-image: linear-gradient(90deg, black 10%, skyblue 30%, red 100%, red);
        }