一、平面转换

1.平面转换
作用：为元素添加动态效果，一般与过渡配合使用
概念：改变盒子在平面内的形态（位移、旋转、缩放、倾斜）

平面转换又叫2D
2.平面转换-平移

• 属性transform: translate(x轴移动距离，Y轴移动距离);
• 取值
  1.像素单位数值
  2.百分比（参考盒子自身尺寸计算结果）
  3.正负均可

3.平移实现居中效果
方法一：

position: absolute;
left:50%;
top:50%;

margin-left: -100px;
margin-top: -50px;

width:200px;
height:100px;

方法二：百分比参照盒子自身尺寸计算结果

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

3.平面转换-旋转

• 属性transform: rotate(旋转角度，单位deg);
• 技巧
  1.取值正负均可
  2.取值为正，顺时针旋转
  取值为负，逆时针旋转

4.平面转换-改变转换原点

• 默认情况下，转换原点是盒子中心点
• 属性：transform-origin:水平原点位置 垂直原点位置;
• 取值
  1.方位名词（left、top、right、bottom、center）
  2.像素单位数值
  3.百分比

5.平面转换-多重转换

• 多重转换技巧：先平移再旋转transform:translate() rotate();

6.平面转换-缩放

• 思考：改变元素的width或height属性能实现吗？
• 属性：transform: scale(缩放倍数) transform:scale(x轴缩放倍数，y轴缩放倍数)
• 技巧
  1.通常，只为scale()设置一个值，表示x轴和y轴等比例缩放
  2.取值大于1表示放大，取值小于1表示缩小

7.平面转换-倾斜

• 属性：transform：skew();
• 取值：角度度数deg

8.平面转换-渐变

• 渐变是多个颜色逐渐变化的效果，一般用于设置盒子背景
• 分类
  1.线性渐变
  2.径向渐变

线性渐变：
属性：

background-image:linear-gradient(
	渐变方向,
	颜色1 终点位置,
	颜色2 终点位置,
	......
);

取值：

• 渐变方向：可选
  to 方位名词
  角度度数
• 终点位置：可选
  百分比

半透明

background-image: linear-gradient(
	transparent,
	rgba(0,0,0,0.6)
);

径向渐变：

作用：给按钮添加高光效果
属性：

background-image:radient(
	半径 at 圆心位置,
	颜色1 终点位置,
	颜色2 终点位置,
	......
);

取值：
半径可以是2条，则为椭圆
圆心位置取值：像素单位数值/百分比/方位名词

二、空间转换

1.空间转换

• 空间：是从坐标轴角度定义的X、Y和Z三条坐标轴构成了一个立体空间，Z轴位置与视线方向相同。
• 空间转换也叫3D转换
• 属性：transform

transform：translate3d(x, y, z);
transform: translateX();
transform: translateY();
transform: translateZ();

• 取值（正负均可）
  1.像素单位数值
  2.百分比（参照盒子自身尺寸计算结果）

2.视距perspective
作用：指定了观察者与Z=0平面的距离，为元素添加透视效果
透视效果：近大远小、近实远虚
属性：（添加给 父级，取值范围800-1200）
写法：perspective: 视距

2.空间-旋转

• transform: rotateZ(值)
• transform: rotateX(值)
• transform: rotateY(值)

左手法则
根据旋转方向确定正负值
左手握住旋转轴，拇指指向正值方向，其他四个手指弯曲方向为旋转正值方向

3.立体呈现 - transform-style
作用：设置元素子元素是位于3D空间还是平面中
属性名：transform-style
属性值：

• flat：子级处于平面中
• preserve-3d：子级处于3D空间

步骤：
1.父元素添加transform-style:preserve-3d;
2.子级定位
3.调整子盒子的位置（位移或旋转 ）

3.空间转换 - 缩放

• 属性

transform: scale3d(x, y, z);
transform: scaleX();
transform: scaleY();
transform: scaleZ();

三、动画 - animation

• 过渡：实现两个状态间的变化过程
• 动画：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面，是否暂停）

1.定义动画
方法1：

@keyframes 动画名称{
	from{}
	to{}
}

方法2：

@keyframes 动画名称{
	0%{}
	10%{}
	......
	100%{}
}

2.使用动画

animation: 动画名称 动画花费时长;

3.动画
animation:动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时的状态

提示：

• 动画名称和动画时长必须赋值
• 取值不分先后顺序
• 如果有两个时间值，第一个表示动画时长，第二个时间表示延迟时间

重复执行：infinite

反向：alternate

动画执行完毕位置：
1.forwards：结束状态
2.backwards：开始状态

4.动画 - animation各种

属性	作用	取值
animation-name	动画名称
animation-duration	动画时长
animation-delay	延迟时间
animation-fill-mode	动画执行完毕时状态	forwards：最后一帧状态 backwards：第一帧状态
animation-timing-function	速度曲线	steps(数字)：逐帧动画
animation-iteration-count	重复次数	infinite为无限循环
animation-direction	动画执行方向	alternate为反方向
animation-play-state	暂停动画	paused为暂停，通常配合:hover使用

4.动画 - 逐帧动画

属性	作用
animation-timing-function	速度曲线	steps(数字)：逐帧动画

核心原理：
1.steps()逐帧动画
2.CSS精灵图

精灵动画制作步骤;

1. 准备显示区域
   盒子尺寸与一张精灵小图尺寸相同
2. 定义动画
   移动背景图（移动距离 = 精灵图宽度）
3. 使用动画
   steps(N)，N与精灵小图个数相同

4.动画 - 多组动画

animation:
	动画1,
	动画2,
	动画N,
;

四、移动端网页

适配方案：

• 宽度适配：宽度自适应
  百分比布局
  Flex布局
• 等比适配：宽高等比缩放（移动端）
  rem
  vw

1.rem

• rem单位，是相对单位
• rem单位是相对于HTML标签字号计算结果
• 1rem = 1HTML字号大小

2.媒体查询

• 媒体查询能够检测视口宽度，然后编写差异化的CSS样式
• 当某个条件成立，执行对应的CSS样式

目前rem布局方案中，将网页等分成10份，HTML标签字号为视口宽度的1/10

3.rem - 移动适配

• 目标：计算68px是多少个rem?（设计稿适配375px视口）
• N * 37.5 = 68

rem单位尺寸

1. 确定基准根字号
   查看设计稿宽度–>确定参考设备宽度（视口宽度）–>确定基准根字号（1/10视口宽度）
2. rem单位的尺寸
   rem单位的尺寸 = px单位数值 / 基准根字号

五、less - 简介

1.less

• Less是一个CSS预处理器，Less文件后缀是.less。扩充了CSS语言，使CSS具备一定的逻辑性、计算能力
• 注意：浏览器不识别Less代码，目前阶段，网页要引入对应的CSS文件
• VS Code插件：Easy LESS，保存less文件后自动生成对应的CSS文件

2.less - 注释
注释：

• 单行注释
  语法： //注释内容
  快捷键：ctrl+/
• 块注释
  语法：/注释内容/
  快捷键：Shift+Alt+A

3.less - 运算
运算：

• 加、减、乘直接写计算表达式
• 除法需要添加小括号或者 .

4.less - 嵌套
作用：快速生成后代选择器

5.less - 变量
概念：容器，储存数据
作用：存储数据，方便使用和修改
语法：
定义变量: @变量名: 数据;
使用变量: CSS属性: @变量名;

6.less - 导入
作用：导入less公共样式文件
语法：导入：@import"文件路径";
提示：如果是less文件可以省略后缀
7.less - 导出
写法：在less文件的第一行添加//out:存储URL
提示：文件夹名称后面添加/
8.less - 禁止导出
写法：在less文件第一行添加：//out:false

六、vw和vh

• 相对单位
• 相对视口的尺寸计算结果
• vw：viewport width（1vw=1/100视口宽度）
• vh：viewport height（1vh=1/100视口高度）

1.vw布局
1.确定设计稿对应的vw尺寸（1/100视口宽度）
查看设计稿宽度–>确定参考设备宽度（视口宽度）–>确定vw尺寸（1/100视口宽度）
2.vw单位的尺寸 = px单位数值 / （1/100视口宽度）

2.vh单位问题
开发中vw和vh不能混用
vh是1/100视口高度，全面屏视口高度尺寸大，如果混用会导致盒子变形

七、媒体查询

媒体特性

• max - width：最大宽度
• min - width：最小宽度

书写顺序：

• 默认网页背景色是灰色
• 屏幕宽度大于等于768px，网页背景色是粉色
• 屏幕宽度大于等于992px，网页背景色是绿色
• 屏幕宽度大于等于1200px，网页背景色是skyblue

min-width从小到大写
max-width从大到小写

1.媒体查询-外部CSS
<link rel="stylesheet" media="逻辑符 媒体类型 and (媒体特性)"href="xx.css">

八、Bootstrap

Bootstrap是由Twitter公司开发维护的前端UI框架，它提供了大量编写好的CSS样式，允许开发者结合一定HTML结构及JavaScript，快速编写功能完善的网页及常见交互效果。
1.Bootstrap-使用
使用步骤：
1.引入Bootstrap CSS文件

<link rel="stylesheet" href"./Bootstrap/css/bootstrap.min.css">

2.调用类名：container: 响应式布局版心类
<div class="container">测试</div>
2.Bootstrap-栅格系统

栅格化是指将整个网页的宽度分成12等份，每个盒子占用对应的份数
常用布局类：

• col--：列
• row：行

3.Bootstrap-全局样式
按钮：

• btn：默认样式
• btn：success：成功
• btn-warning：警告
• 按钮尺寸：btn-lg / btn-sm

表格：

• table：默认样式
• table-striped：隔行变色
• table-success：表格颜色

4.Bootstrap-组件

1. 引入样式表
2. 引入js文件
3. 复制结构，修改内容

5.Bootstrap-字体图标
使用：

1. 复制fonts文件夹到项目目录
2. 网页引入bootstrap-icons.css文件
3. 调用CSS类名（图标对应的类名）