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

1.字体图标

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

优点：

1. 灵活性：灵活地修改样式，例如：尺寸、颜色等
2. 轻量级：体积小、渲染快、降低服务器请求次数
3. 兼容性：几乎兼容所有主流浏览器
4. 使用方便：
   下载字体包
   使用字体图标

图标库

Iconfont：https://www.iconfont.cn/

下载字体包：

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

使用字体图标 - Unicode编码：

引入样式表：iconfont.css
复制粘贴图标对应的Unicode编码:
设置文字字体: span{font-family:'iconfont';}

使用字体图标 – 类名

引入字体图标样式表：

Snipaste_2022-04-01_22-25-28.png

调用图标对应的类名，必须调用2个类名
iconfont类：基本样式，包含字体的使用等
icon-xxx：图标对应的类名

Snipaste_2022-04-01_22-27-37.png

上传矢量图

上传 → 上传SVG图标
浏览本地图标 → 去除颜色提交
加入购物车 → 下载使用

平面转换概念

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

平面转换

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

平面转换属性

transform

位移

目标：使用translate实现元素位移效果
语法
Ø transform: translate(水平移动距离, 垂直移动距离);
l 取值（正负均可）
Ø 像素单位数值
Ø 百分比（参照物为盒子自身尺寸）
注意：X轴正向为右，Y轴正向为下
l 技巧
Ø translate()如果只给出一个值, 表示x轴方向移动距离
Ø 单独设置某个方向的移动距离：translateX() & translateY()

位移-绝对定位居中

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

实现方法：

3333.png

4444.png

旋转

目标：使用rotate实现元素旋转效果
语法
Ø transform: rotate(角度);
注意：角度单位是deg
l 技巧：取值正负均可
Ø 取值为正, 则顺时针旋转
Ø 取值为负, 则逆时针旋转

转换原点

目标：使用transform-origin属性改变转换原点
l 语法
Ø 默认圆点是盒子中心点
Ø transform-origin: 原点水平位置 原点垂直位置;
l 取值
Ø 方位名词（left、top、right、bottom、center）
Ø 像素单位数值
Ø 百分比（参照盒子自身尺寸计算）
多重转换
目标：使用transform复合属性实现多形态转换
l 多重转换原理
Ø 旋转会改变网页元素的坐标轴向
Ø 先写旋转，则后面的转换效果的轴向以旋转后的轴向为准，会影响转换结果

缩放

目标：使用scale改变元素的尺寸
语法
Ø transform: scale(x轴缩放倍数, y轴缩放倍数);
l 技巧
Ø 一般情况下, 只为scale设置一个值, 表示x轴和y轴等比例缩放
Ø transform: scale(缩放倍数);
Ø scale值大于1表示放大, scale值小于1表示缩小
l 播放按钮
Ø 布局
Ø ::after
Ø 样式
Ø 居中
Ø 效果
Ø 缩放
Ø 透明度（opacity）

渐变背景

目标：使用background-image属性实现渐变背景效果
l 渐变是多个颜色逐渐变化的视觉效果
l 一般用于设置盒子的背景
background-image : linear-gradient(颜色1，颜色2)；

l 语法

5555.png