CSS3
一、字体图标
目标：使用字体图标技巧实现网页中简洁的图标效果
注意点：
1、字体图标展示的是图标，本质是字体
2、处理简单的、颜色单一的图片
优点：
1、灵活性：灵活地修改样式，如：尺寸、颜色等
2、轻量级：体积小、渲染快、降低服务器请求次数
3、兼容性：几乎兼容所有主流浏览器
4、使用方便：
（1）下载字体包（2）使用字体图标
字体库： Iconfont:https://www.iconfont.cn
网站使用步骤：
1、打开官方图标库
2、将选择的图标添加购物车并添加到项目中
3、下载到本地
1.1 使用字体图标
1、引入字体图标样式表
<link rel="stylesheet" href="./iconfont.css">
2、调用图标对应的类名，必须调用两个类名
iconfont类：基本样式，包含字体的使用等
icon-xxx:图标对应的类名
例：
<span class="iconfont icon-icon-test3"></span>
注意点：若网站没有所需字体图标时，可手动在iconfont网站上传矢量图再进行下载
——矢量图为SVG格式
二、平面转换
目标：使用transform属性实现元素的位移、旋转、缩放等效果
2.1 位移
代码：
transform:translate(水平移动距离，垂直移动距离);
取值（正负均可）：
· 数字+px
· 百分比（参照物为盒子自身尺寸）
注意点：
1、translate()如果只给出一个值，表示x轴方向移动距离
2、单独设置某个方向的移动距离：translateX()和translateY()
2.2 旋转
代码：transform:rotate(角度);（注意：角度单位是deg）
取值（正负均可）：正—顺时针，负—逆时针
注意点：旋转效果必须配合过渡
2.3 补充
2.3.1 转换原点
目标：使用transform-orgin属性改变转换原点
代码：transform-orgin:原点水平位置 原点垂直位置；
取值：
1、方位名词（left、top、right、bottom、center）
2、像素单位数值
3、百分比（参照盒子自身尺寸计算）
注意点：
1、默认原点是盒子中心点
2.3.2 多重转换
目标：使用transform复合属性实现多形态转换
代码：transform: translate() rotate();
2.4 缩放
代码：transform:scale(x轴缩放倍数，y轴缩放倍数);
注意点：
1、一般情况下，只为scale设置一个值，表示x轴和y轴等比例缩放：
transform:scale(缩放倍数);大于1表示放大，小于1表示缩小
三、渐变
代码：
background-image: linear-gradient(
颜色1,
颜色2
);
半透明渐变：
background-image: linear-gradient(
transparent,
rgba(0,0,0,.5);
);
注意点：一般将遮罩层的类名起作.mask
四、空间转换
目标：使用transform属性实现元素在空间内的位移、旋转、缩放等效果
· 空间：是从坐标轴定义的。x、y和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同
· 空间转换也叫3D转换
属性：transform
4.1 空间位移
代码：transform:translate3d(x,y,z);
取值（正负均可）：
· 数字+px
· 百分比（参照物为盒子自身尺寸）
注意点：
1、单独设置某个方向的移动距离：translateX()和translateY()和translateZ()
4.2 透视
属性：perspective:值;（添加给父级）
取值：像素单位数值，数值一般在800~1200
添加透视效果使z轴方向上的位移可以被使用者观测到
4.3 空间旋转
语法：
transform:rotateZ(值deg);
transform:rotateX(值deg);
transform:rotateY(值deg);
注意点：可使用左手法则判断正负方向
扩展：
· rotate3d(x,y,z,角度度数);用来设置自定义旋转轴的位置及旋转的角度
· x,y,z取值为0~1之间的数字
4.4 立体呈现
实现方法：
1、添加transform-style: preserve-3d;
2、使子元素处于真正的3d空间
3、默认值flat，表示子元素处于2d平面内呈现
4.5 空间缩放
语法：
transform:scaleX(倍数);
transform:scaleY(倍数);
transform:scaleZ(倍数);
transform:scale3d(x,y,z);
五、动画
5.1 动画实现
目标：使用animation添加动画效果
-构成动画的最小单元：帧或动画帧
动画效果：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）
实现步骤：
1、定义动画
方法1：
@keyframes 动画名称 {
from{}
to{}
}
方法2（百分比是动画总时长的占比）：
@keyframes 动画名称 {
0%{}
10%{}
15%{}
100%{}
}
2、使用动画
animation: 动画名称 动画花费时长；
代码实例：
5.2 animation复合属性
目标：使用animation相关属性控制动画执行过程
代码：
animation: 动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态；
注意：
1、动画时间和动画时长必须赋值
2、取值不分先后顺序
3、如果有两个时间值，第一个时间代表动画时长，第二个时间代表延迟时间
5.2.1 属性值补充
1、速度曲线
| 属性值 | 效果 |
|---|---|
linear | 匀速变化 |
step(数字) | 将动画分成几等分执行（分步动画） |
2、延迟时间
控制动画出现的延迟时间
3、重复次数
| 属性值 | 效果 |
|---|---|
| 数字 | 重复执行动画几次 |
infinite | 无限循环 |
4、动画方向
| 属性值 | 效果 |
|---|---|
alternate | 动画多反向执行一次，回到最初状态 |
5、执行完毕状态
| 属性值 | 效果 |
|---|---|
backwards | 默认值，动画停留在最初的状态 |
forwards | 动画停留在最后的状态 |
5.2.2 animation拆分写法
| 属性 | 作用 |
|---|---|
animation-name | 动画名称 |
animation-duration | 动画时长 |
animation-delay | 延迟时长 |
animation-fill-mode | 动画执行完毕时状态 |
animation-timing-function | 速度曲线 |
animation-iteration-count | 重复次数 |
animation-direction | 动画执行方向 |
animation-play-state | 暂停动画 |
补充：暂停动画属性取值paused为暂停，通常配合:hover使用
5.3 逐帧动画
目标：使用step实现逐帧动画
场景：开发中，一般配合精灵图实现动画效果
将动画过程等分成N份：
animation-timing-function:step(N);
精灵动画制作步骤：
- 准备显示区域
设置盒子尺寸是一张小图的尺寸，背景图为当前精灵图 - 定义动画
改变背景图的位置（移动的距离就是精灵图的宽度） - 使用动画
添加速度曲线steps(N)，N与精灵图上小图个数相同
添加无限重复效果
5.4 多组动画
目标：使用animation属性给一个元素添加多个动画效果
代码：
aniamtion:
动画1,
动画2,
动画N
;