寒假集训
六十一、关键帧动画
属性
animation:动画名称 动画的持续时间 动画的过渡类型 动画延迟的时间 动画的循环次数 动画在循环中是否反向运动
//infinite 无限次
@keyframes identifier{
from{}
to{}
//0%{}
//100%{}
}
animation和transition的区别
相同点:
都是随着时间改变元素的属性值。
不同点:
transition需要触发一个事件(hover事件或click事件等)才会随时间改变其css属性;而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素css的属性值，从而达到一种动画的效果，css3的animation就需要明确的动画属性值。
单一属性
transform:translateX(-100%);
100%是相对于自身的100%
animation
animation复合属性。检索或设置对象所应用的动画特效。
1.animation-name检索或设置对象所应用的动画名称
说明:
必须与规则@keyframes配合使用，eg:@keyframes mymove{} animation-name:mymove
2.animation-duration检索或设置对象动画的持续时间
说明:
animation-duration:3s;动画完成使用的时间为3s
3.animation-timing-function检索或设置对象动画的过渡类型
说明:
linear:线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
ease:平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
ease-in:由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
ease-out:由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
ease-in-out:由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
steps()
end（保留当前帧，看不到最后一帧，动画结束）
start（保留下一帧，看不到第一帧，从第一帧很快跳到最后一帧）
4.animation-delay检索或设置对象动画延迟的时间
说明:
animation-delay:0.5s;
动画开始前延迟的时间为0.5s)
5.animation-iteration-count检索或设置对象动画的循环次数
说明:
animation-iteration-count: infinite | number;infinite:无限循环
number:循环的次数
6.animation-direction检索或设置对象动画在循环中是否反向运动
说明:
normal:正常方向
reverse:反方向运行
alternate:动画先正常运行再反方向运行，并持续交替运行
alternate-reverse:动画先反运行再正方向运行，并持续交替运行
7.animation-play-state 检索或设置对象动画的状态
说明:
animation-play-state:running l paused;
running:运动
paused:暂停
animation-play-state:paused; 当鼠标经过时动画停止，鼠标移开动画继续执行
animation-fill-mode
none默认值
forwards最后的画面
backwards初始画面
六十一、3D
什么是3d的场景呢? 2d场景, 在屏幕上水平和垂直的交叉线x轴和y轴
3d场景，在垂直于屏幕的方法，相对于3d多出个z轴
Z轴:靠近屏幕的方向是正向，远离屏幕的方向是反向
transform-style: preserve-3d;//3d舞台 flat: 2d舞台
CSS3中的3D变换主要包括以下几种功能函数:
3D位移:
CSS3中的3D位移主要包括translateZ()和translate3d()两个功能函数;
3D旋转:
CSS3中的3D旋转主要包括rotateX()、rotateY()、 rotateZ()和rotate3d()四个功能函数;
3D缩放:
CSS3中的3D缩放主要包括scaleZ)和scale3d()两个功能函数;
CSS3 3D变形中的缩放主要有scaleZ0和scale3d()两种函数，当scale3d(中X轴和Y轴同时为1, 即scale3d(1,1,sz), 其效果等同于scaleZ(sz)。 通过使用3D缩放函数，可以让元素在Z轴上按比例缩放。默认值为1,当值大于1时,元素放大,反之小于1大于0.01时,元素缩小
scale3d(sx,sy,sz)
- sx：横向缩放比例;
- sy：纵向缩放比例;
- sz：Z轴缩放比例;
scaleZ(s)
- s:指定元素每个点在Z轴的比例。
注: scaleZ()和scale3d()函数单独使用时没有任何效果，需要配合其他的变形函数-起使用才会有效果
景深
生活中的3d区别于2d的地方
近大远小 景深.
程序中实现的方法 perspective 元素距离视线的距离（物体和眼睛的距离越小，近大远小的效果越明显）
perspective: 1200px; (在父元素中使用)
transform:perspective(1200px) (在子元素中使用)
两个都设置会发生冲突，建议只设置父元素，通常的数值在900-1200之间
如果当你的视线距离物体足够远的时候，基本上就不会有近大远小的感觉
perspective-origin;
观察3d元素的（位置）角度perspective -origin: center center (中心)
perspective-origin: left top (左 上角)
perspective-origin: 100% 100% (右下角)
六十二、网格布局
1、网格布局的概念，和flex布局的区别
含义：它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局
区别：Grid 布局与Flex布局有一定的相似性， 都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。Flex布局是轴线布局，只能指定“项目”针对轴线的位置，可以看作是一维布局。
Grid布局则是将容器划分成“行”和“列”，产生单元格，然后指定“项目所在”的单元格，可以看作是二维布局。
（1）容器和项目
容器：一个案例中最大的盒子，可以理解成父元素
项目：一个案例中的，最大盒子里面的内容，可以理解成子元素
<section>
<div>
<p></p>
</div>
<div>
<p></p>
</div>
<div>
<p></p>
</div>
</section>
<!-- 以上代码section为容器，div为项目（项目不包括p标签） -->
（2）行和列
行和列：容器里面的水平区域称为“行”，垂直区域称为“列”。
（3）单元格
单元格：行和列的交叉区域，称为“单元格”。
（4）网格线
网格线：划分网格的线,称为“网格线”。水平网格线划分出行，垂直网格线划分出列。
注意：组成一个网格：需要5条线，2条横线，2条总线
注意：组成一个1行2列的网格，需要5条线，2条横线，3条总线
注意：组成个2行1例的网格，需要5条线，3条横线，2条总线
结论：如果一个m行n列的网格，需要m+1+n+1条线，m+1条横线，n+1条总线
2、网格布局中的属性
含义：网格布局中的属性和flex中的布局属性类似，分为了两类，一类容器属性；一类是项目属性
（1）容器属性
- 触发网格布局
给父元素添力display:grid
display关于网格的取值分为两个，grid(块网格)和inline -grid(行内网格，行内块)
grid=容器从上向下排列
inline-grid=容器从左向右排列
display:grid;块级网格
display:inline-grid;行内块级网格 - 行列划分
规定行属性：grid -template -row:
固定列属性: grid-template column:
后面的取值数量代表的是多少行，多少列
1)绝对大小(根据列数或者行数确定值的个数)例: 200px 200px 200px
grid-template-columns:200px 200px 200px
grid-template-columns:33.33% 33.33% 33.33%
2)百分比(根据列数或者行数确定值的个数)例: 33.33% 33.33% 33.33%
grid-template-rows :200px 200px 200px
grid-template-rows:33.33% 33.33% 33.33%
/* 1 固定值 */
/* grid-template-rows: 200px 200px 200px;
grid-template-columns: 200px 200px 200px; */
/* 2 百分比 */
/* grid-template-rows: 33.3% 33.3% 33.3%;
grid-template-columns: 33.3% 33.3% 33.3%; */
/* 3 repeat */
/* grid-template-rows: repeat(3,33.3%);
grid-template-columns: repeat(3,33.3%); */
/* 4 repeat autofill */
/* grid-template-rows: repeat(auto-fill,200px);
grid-template-columns: repeat(auto-fill,20%); */
/* 5 fr 片段 */
/* grid-template-rows: 1fr 2fr 1fr;
grid-template-columns: 1fr 2fr 1fr; */
/* 6 minmax */
/* grid-template-rows: minmax(100px,200px) 200px 100px;
grid-template-columns: 200px 200px 200px; */
/* 7 auto */
grid-template-rows: 100px 200px auto;
grid-template-columns: 100px 200px auto;
- 列间距（重点：复合属性）
grid-row-gap:20px /* 行间距 */
grid-column-gap:20px /* 列间距 */
grid-gap:30px 30px /* 复合式写法*/
/* 注:新版本已经省略grid-前缀 row-gap \ column-gap \ gap */
- 指定区域
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-template-areas:'a b c'
'd e f’
'g h i';
/*
将整个网格容器分为9个区域，每个区域对应一个单元格
通过grid-area指定项目名称。
*/
display:grid;
grid-template-columns :repeat(3, 100px);
grid-template-rows:repeat(3, 100px);
grid-template-areas:'a a a'
'. . b'
'. c c';
合并的时候使用grid-area:网格名字;进行合并
- 项目排列顺序
grid-auto-flow: column | row;
/*
row dense和column dense。
这两个值主要用于，某些项目指定位置以后，剩下的项目怎么自动放置。
*/
- 单元格内容对其(重点:复合属性)
justify-items: start | end | center | stretch;
align-items: start | end | center | stretch;
place-items: <justify-items> <align-items> /* 复合式写法 */
/*
start:对齐单元格的起始边缘。
end:对齐单元格的结束边缘。
center:单元格内部居中。
stretch:拉伸，占满单元格的整个宽度（默认值）。
*/
- 单元格项目对齐(重点:复合属性)
justify-content:start | end | center | stretch | space-around | space-between | space-evenly;
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
place-content: <justify-content> <align-content> /* 复合式写法*/
/*
start-对齐容器的起始边框。
end-对齐容器的结束边框。
center-容器内部居中。
stretch-项目大小没有指定时，拉伸占据整个网格容器。
space-around-每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍。
space-between-项目与项目的间隔相等，项目与容器边框之间没有间隔。
pace-evenly-项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔。
（2）项目属性
- 网格线合并(单一属性)
grid-column-start
grid-column-end
grid-row-start
grid-row-end
/*
grid-column-start属性:左边框所在的垂直网格线
grid-column-end属性:右边框所在的垂直网格线
grid-row-start属性:上边框所在的水平网格线
grid-row-end属性:下边框所在的水平网格线
*/
grid-column-start:1;
grid-column-end:3;
grid-row-start: 2;
grid-row-end:4;