vocal！！拖了这么久我才来写，我好Dior。刚刚吃了四根冰淇淋我好Dior。。。
CSS
平面转换——transform
作用：为元素添加动态效果，一般与过渡配合使用
概念：改变盒子在平面内的形态（位移、旋转、缩放、倾斜）
平移——translate()
属性：transform: translate( X轴移动的距离, Y轴移动的距离)
取值：px、%（参照自身盒子计算结果） 正负均可
技巧：tanslate() 只写一个值，表示沿着X轴移动
单独设置X或Y轴移动距离：translateX() 或 translateY()
平移实现居中效果
- 方法一
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -50px;
width: 200px;
height: 100px;
- 方法二：百分比参照自身盒子尺寸计算结果
postion: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%)
旋转——rotate()
属性：transform: rotate(旋转角度)
旋转角度单位：deg 正顺逆负
改变转换原点：
正常情况下，转换原点是盒子中心点
属性：transform-origin: 水平原点 垂直原点位置
取值：方位名词（left, top, right, bottom, center）、px、%
多重转换
以第一种转换形态的坐标轴为准
技巧：先平移后旋转 (因为这样它的坐标轴才不会变，才可以达到轮胎那样滚着走的效果
属性：transform: translate() rotate() // 要写在一起，因为它是复合属性 具有层叠性
缩放——scale()
属性：transform: scale(缩放倍数)
transform(X轴缩放倍数, Y轴缩放倍数)
技巧：通常只为scale设置一个值，表X轴Y轴等比例缩放
取值大于1表放大，取值小于1表缩小
倾斜——skew()
属性：transform: skew(xxdeg) 正左右负
渐变———background-image
1. 线性渐变——linear-gradient
background-image: linear-gradient(
渐变方向,
颜色1 终点位置,
颜色2 终点位置,
...
};
取值：
渐变方向：to 方位名词 角度度数
终点位置：%
2. 径向渐变——radial-gradient
作用：给按钮添加高光效果
属性：background-image: radial-gradient(
半径 at 圆心位置,
颜色1 终点位置，
);
取值：
半径可以是两条，则为椭圆
圆心位置取值：px、%、方位名词
空间转换（3D转换 ——transform
Z轴位置与视线方向相同
属性：transform
平移
transform: translate3d(x, y, z)
transform: translateX() transform: translateY() transform: translateZ()
取值：px、%（正负均可
视距 perspective
作用：制定了观察者与Z=0平面的距离，为元素添加透视效果
透视效果：近大远小 近实远虚
属性：perspective: 视距;
添加给父级，取值范围：800-1200
旋转
transform: rotateZ(值) 跟平面旋转效果一样
transform: rotateX(值) 正：往里走 负：电脑关上那样
transform: rotateY(值) 正：从左往右 负：从右往左走
左手法则——根据旋转方向确定取值正负
左手握住旋转轴，拇指指向正值方向，其他四个手指弯曲方向为正值方向
自定义旋转轴位置及旋转角度
rotate3d(x y z 角度度数)
x y z取值为0-1之间的数字
立体呈现——transform-style
作用： 设置元素的子元素是位于3D空间中还是平面中
属性名：transform-style
属性值：
flat: 子级处于子平面中
preserved-3d: 子级处于3D空间中
呈现立体图形——步骤
- 父元素添加transform-style: preserved-3d;
// 父级就会变成一个立方体，子级位于立方体空间 - 子级定位
// 子级是立方体的每个面，所以子级要基于父级去定位 子绝父相 - 调整盒子的位置（位移或旋转）|
// 子级一前一后，产生立体空间(translate)
// 可以用hover{ rotatey() } 和 .cube{ transition: }去体验一下
缩放
属性：transform: scale3d(x, y, z)
transform: scaleX(); transform: scaleY(); transform: scaleZ()
动画——animation
过渡：实现两个状态间的变化过程 （transition
动画：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停
实现步骤
1.定义动画
- 两个状态变化
@keyframes 动画名称{
form { 当前状态CSS} //如果动画开始状态样式跟盒子默认样式相同 可省略开始状态代码
to { 当前状态CSS }
}
- 多个状态
@keyframe 动画名称 {
0% { } //如果动画开始状态样式跟盒子默认样式相同 可省略开始状态代码
10% { }
.....
100% { }
}
// 百分比的含义：这个状态占动画时长的百分比
2. 使用动画
animation: 动画名称 动画花费时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时的状态
!! 注意 !! ：
- 动画名称和动画时长必须写
- 取值不分先后顺序
- 如果有两个时间值，第一个表达动画时长 第二个表延迟时间
七个属性：
- animation-name: 动画名称
- animation-duration: 动画时长
- animation-delay: 延迟时长
- animation-fill-mode: 动画执行完毕时的状态
forwards: 最后一帧
backwards: 第一帧- animation-timing-function: 速度曲线
steps() 逐帧动画- animation-iteration-count: 重复次数
infinite 无限循环- animation-direction: 动画执行方向
alternation 反方向- animation-play-state: 暂停动画
pause为暂停 通常配合hover
无缝动画原理
复制开头图片到结尾位置（图片宽度 = 区域宽度）
走马灯案例
精灵动画
核心原理：1. steps() 逐帧动画 2. CSS精灵图
制作步骤：1. 准备显示区域：盒子尺寸与一张精灵小图尺寸相同
2. 定义动画：移动背景图 移动距离=精灵图宽度
3. 使用动画：step(N) N与精灵小图的个数相同
多组动画
animation：
动画1,
动画2,
...
动画N
;
JS
正则表达式
用于匹配字符串中字符的组合模式，在JS中，也是对象。通常用来查找、替换那些符合正则表达式的文本。
语法：
1.定于正则表达式语法
const 变量名 = /表达式/
其中/ / 是正则表达式字面量
2.判断是否有符合规则的字符串
regObj.test(被检测的字符串)
test()方法：用来查看正则表达式与指定的字符串是否匹配
3.检索(查找)符合规则的字符串
regObj.exec(被检测的字符串)
exec()方法：在一个指定的字符串中执行一个搜索匹配
元字符
普通字符：仅仅只能够描述它们本身 (abcdefg...xyz
元字符：具有特殊含义 ( [a-z]
分类：
- 边界符：表位置、开头和结尾 必须用什么开头，用什么结尾
- 量词：表重复次数
- 字符类：比如 \d 表 0-9
1.边界符
正则表达式中的边界符（位置符）用来提示字符所处的位置，主要有两个字符
)
