尚硅谷前端基础 (116)

好，那么接下来呢，我们来做一个小的练习啊，练习什么样呢？在我这儿呢，有一张图片啊，有这么一张图片，哎，它是这样的啊嗯，其实就是一个还点还得点开给关了。就是一个这个小米的这个米兔的一个图片，那这个图片呢，其实你会发现它有一个特点，它什么特点呢。诶，他每一个图片其实都是一个动作，诶第一个可能往前走一下，第二个就就就就就就是就站住了是吧，这条腿合过来了，诶第三步呢，然后这条腿又它这条腿又迈出去了，哎，然后就是这么这么一个东西是吧，这么一个东西，然后这条腿就出来了啊大概是这么一个这么一个东西，那这个呢，其实很明显，它是用来做一个这个呃，动画效果的，对吧，动画效果的，那这个时候其实他的动作肯定就是一个。让这个小兔子呢，走起来这么一个效果，那现在我们就想利用我们这个transition，我们怎么来实现这个动画效果，来我们来做一下啊，那首先这个图片呢，我们先给它拖进来。

在我们的这个练习里边啊，我们这个练习里边，我们放到这个IG里，IG里边我们创建一个新的文件夹，我们该11了啊，该11了，我把这个图片给它整进来。11啊整进来以后呢，在这里面我们来新建一个练习的页面，新建一个文件，我们来一个111，我们这个是一个这个me兔的一个动画，Me的一个动画啊第一个A码，呃，写完了以后，在这我们来先创建一个这个页面，页面呢，我们来给它运行出来啊运行出来。那这个呢，我们直接写了啊，直接写里边我们创建一个这个div啊，点一个BOX1 box1的话，它是有一个大小对吧？它的大小呢？诶它的大小应该我们不能瞎写对吧？它的大小应该是跟这个跟这个兔子的大小是是一边大对吧？兔子多大它就多大，那这里边的兔子多大呢？兔子的高度你看这是一个528乘以一个271 528乘以271，那么高度就是一个271，高度是271的话，那我们就直接写啊，直接来一个style标签。

子带有标签，我们的这个高度，哎，直接来一个，我们点一个BOX1，高度是一个271个像素，271个像素啊，然后我们看啊，还有什么玩意儿，还有一个高度271，然后它是不是还有一个这个宽度啊，哎，宽度是一个528 528的话，但是实际上这是有四个兔子对吧，四个兔子那应该是528除以一个四，除以四的话，应该是一三二一百三十二个像素，所以我们就直接写一个Y是一个132个像素啊，132像素，然后这里边我们直接设置一个background image，我们直接来个URLURL，我们这个是点一个img下的一个这个csi，这个叫什么呀？叫做一个幺幺下的一个这个图片。

我们复制一下啊，CC复制它的名，然后我再粘过来。哎，他这名儿。CTRLC。CTRLV直接复制过来啊F2改一下名CTRLC。无所谓，所以这个工具呢，有时候也不是那么好用啊好，那现在这个兔子我们就得出来了啊们为了好看一点，把它位置往中间调1.margin，我们来一个零，然后来一个凹凸，凹凸的话，这兔子就跑中间去了，那现在我们希望的是什么呢？呃，希望的是我们这个兔子它是可以移动的，对吧，当我鼠标一进去以后，这个兔子就就走起来对吧，就走起来，那这里边的话，其实让兔子移动的话，我们这很明显我们应该是修改的它的一个这个background，一个position，哎，我们把它的background position1改，它说是动起来了，哎，Background一个position，我们默认的是一个什么呀，是一个零零，然后在这儿呢，我们给它设置一个BOX1，然后我们就直接冒号一个ho ho的话，Background position position的话，比如说我想切换到第二张图，那我的第二张图那你就不能再写零零了，第二张图呃，我们的垂直方向不用动，诶，那水平方向我们是不是要移一个兔子一个距离啊，一个兔子那应该就是一个负132个像素那。

这个时候我们保存一下看效果，诶是不是就动了一下啊，诶动了一下，那我要移动到第三张图上，应该是一个负的264个像素一保存，诶是不是就移到这个了，诶移到最后一张图呢，它应该就是一个负的一个这个396 396个像素啊，396个像素，这样是不是跑最后一个了，诶所以这个时候我们要让它移动，实上就是切换那个图片，但是现在我们用我们传统的后的话，实际上我们这儿只能是移动什么呢？只能移动一个对吧，只能移动一下，而我们现在是不是希望它可以连续的动啊，哎连续动，连续的动，那也就是意味着我们现在是要从哪要从我们的这个零零，是不是向这个369 3960去过渡啊，哎，去过渡，所以这个时候我们要实现它的话，非常简单，就是用到我们刚才说那个trans section trans sectionction transaction的话，我们这个动画效果呢，应该是给我们这个background position的啊，Background。

Position，那我们省点BA省点事吧，我直接写一够，或者你省略不写就是哦啊省略不写就是说然后的话，下边我们指定一个时间，时间，比如说我是一个两秒，那就表示我所有动画的执行时间是一个两秒，那这时候你看是不是动起来了，哎就动起来了，但是虽然是动起来了，现在它的这个动，它是不是等于我这个背景在滑呀，哎的确可以动，但是有没有得到一个动画片那个效果，哎没有达到，我们现在希望的是什么，希望的是是不是你一张一张去切呀，哎一张一张切，我先从一，哎也就说我现在一共是四张。一共是四个图片，我先从第一个切到这儿，然后再切到这儿，然后再切到这儿，因为我整个过程我要成几个步骤运行，哎，我要分成三个步骤，哎，我先从一切到二，再从二切到三，再从三切到四，我是不是要分成这个三个步骤去执行啊，哎去执行，所以这个时候我们还要去修改一下它的一个实际函数，改成一个steps，我们直接改成一个什么呢？改成一个三，那这样的效果就是我们这个动画会分三步去进行，那你看这回我们这个小兔子是不是就动起来了，哎，动起来了，你看一。

二三是不是切到第三个图片了，你看这是现在是现在初始状态是第一个图片，然后二，诶，然后三，然后四第四个图片，对吧，分三步执行，所以你住了四个图片，我们要分三步啊，要分三步，当然你说老师这玩意儿太慢了，太慢了，你把时间改短一点，比如说你改一个0.3秒，0.3秒应该快一点了吧。我们先保存一下啊，保存一下我们这个代码，保存一下走，诶这个是不是就比较快了，哎，这就比较快了啊，那这样我们就实现了这么一个效果啊，实现了一个简单的一个这个动画效果，当然这个严格意义上来讲不叫动画，它只是一个过度效果，因为我们这儿还需要鼠标移入才动，移出还回去，那我们真正要做动画的话，我们是不是得让他自己动啊，哎，自己动那动画要怎么做？哎，别着急，我们待会儿就来研究一下动画的一个做法，我们来停一下。