前端学习日志0923

1、animation实现逐帧动画

实现原里就是给元素一个雪碧图的背景，然后添加的帧动画更改background-position。但是每帧动画之间帧动画都是滑动，不连贯，所以用另一种简便方法，就是利用steps(),就是帧之间的阶跃动画。

1.steps(1,start):动画一开始就跳到 100% 直到这一帧（不是整个周期）结束
2.steps(1,end):保持 0% 的样式直到这一帧（不是整个周期）结束
3.另外也可以直接设置 animation-timing-function:step-start/step-end
4.step-start效果等同于steps(1,start)，step-end效果等同于steps(1,end)

2.网格布局--display:grid指定一个容器为网格布局

采用网格布局的区域，称为“容器”。容器内部的采用网格定位的子元素称为“项目”。容器里面的水平区域称为“行”，垂直区域称为“列”，行列重叠出来的空间组成单元格。划分网格的线，称为"网格线"。

grid-template-columns：用来指定行的宽度
grid-template-rows：用来指定行的高度

grid-row-gap：设置行与行之间的间隔
grid-colunm-gap：设置列于列之间的间隔

grid-auto-flow：划分网格，容器的子元素排序是按照“先行后列”来排的通过该属性我们可以自定义排列的顺序

justify-items属性设置单元格内容的水平位置

align-items设置单元格内容的垂直位置

justify-content 属性是整个内容区域在容器里面的水平位置

align-conent属性是整个内容区域的垂直位置