web前段进阶：＜3＞逐帧动画和弹性布局

回顾一下上一期我们讲的内容，讲了3d的一个小案例和动画的基本操作，我们要实现3d效果必须要打开透视和3d空间，一般会配合定位一起使用，而且定位和3d空间的属性一般放在一起，而透视可以加载body上；动画实现的步骤分为定义和使用，我们使用#keyframe 名称{}来定义动画，有两种方式一种是from to，一种是百分比；使用动画的属性为animation:动画名称、动画时长、速度曲线、延迟时间、循环次数、动画方向、停止状态；

学完动画的基本操作之后，我们来了解一个好玩的：

也就是逐帧动画，其实就是将一张精灵图通过动画的作用来实现动态的效果：

    <div class="frame">

    </div>

其实这就是用到了一个属性， animation-timing-function: steps(n);这是将动画的时长分为了n步来实现，大家都玩过贪食蛇吧，这个就是那个效果；

在讲解前，请大家想一想，要实现这个效果我们可以怎么做？

1、逐帧动画

既然是动画，那么就分为定义和实现两个步骤：

先讲一下思路，其实就是一个盒子，然后背景图片是一张精灵图，可以使用动画让图片动起来，

我们都知道在设置背景图片的时候其实是可以设置图片的显示位置的：

background-position: -1472px 0;

那么这个位置要如何计算才能让人物准确的显示在盒子的中间呢？很简单，我们将图片的长度量出来，一般电脑自带的图片编辑软件上就有，然后数一数图片上人物的数量，用长度除以人物数量就是盒子宽度了，动画的步数就是人物的数量，当然这个步数是可以写在复合属性里面的animation；

.frame{
    width: 184px;
    height: 325px;
    margin-top: 10px;
    background: url("../../images/jframe1.png");
    animation: change2 1s steps(8) infinite,
    change3 2s linear forwards;
    border: 2px solid black;
}
@keyframes change2 {
/*     from{
        background-position: 0 0;
    } */
    to{
        background-position: -1472px 0;
    }
}

@keyframes change3 {
/*     from{
        transform: translateX(0);
    } */
    to{
        transform: translateX(700px);
    }
}

 如果开始状态和盒子的初始状态相同的话我们就可以省略from；使用steps(N)，n为人物个数，设置逐帧动画，如果要写多个动画，我们直接在第一组动画后写都好继续加就可以；

这里补充一个知识点，如果我们想要在一个元素上使用多个属性怎么办，比如图中这个人物要从浏览器左边走到右边怎么办，

    animation: change2 1s steps(8) infinite,
    change3 2s linear forwards;

 看这一段代码，其实使用了两组动画，可以看到第一组是我们的逐帧动画，带有steps，第二组使用一个逗号隔开，然后是使用transform：translateX来实现的人物移位，所以我们可以使用逗号隔开的方式来使用多组动画；

2、弹性布局

这是浏览器提倡使用的一种布局模型，它的作用就是可以很好的布局，解决了以前使用浮动会脱标的问题；既然是浏览器提倡，那么它的渲染速度肯定要快；

这种模型分为四个部分：弹性容器、弹性盒子、主轴、侧轴

.flexbox1{
    height: 100px;
    border: 2px solid black;
    justify-content: space-between;
/*     align-items: center; */
    display: flex;
}
.flexbox1 div{
    width: 100px;
   /*  height: 50px; */
    background-color: pink;
}

使用display:flex来表示开启弹性模型，用在父级容器上，于是父级容器就叫做弹性容器，那么子级就叫做弹性盒子，默认水平方向叫做主轴，垂直方向叫做侧轴；

对齐方式：

主轴：

justify-content: center;
justify-content: space-around;
justify-content: space-evenly;
justify-content: space-between;

也就是是水平方向，第一个是居中，也就是不留空隙的居中；第二个是在盒子周围留下空隙所以盒子之间的空隙会是两边的两倍；第三种是等距排列；第四种是中间留空隙，两边不留；

 当然这里还有start和end，因为很少使用到我这里就不做讲解，毕竟几乎没有哪一个网页会在首部或者尾部留白；

侧轴：

含有两种，一种给父级加align-items，一种给自己加align-self，它们的取值都是一样的，这里给出一组：

align-items: center;
align-items: stretch;

第一个是垂直居中，第二个是默认样式

 那好，这一期我们就到这，后面会带来一些flex布局的小案例；