1.

我感觉这是我听过最好的前端课了，真是爱上了这个老师。

2.

不BB了，下边我要用css来实现动画，敲了俩遍代码算是搞得清楚了，有注释，大家有不懂得地儿可以评论。

3.

先给大家看一下效果图（PS：其实是动图的）

4.

首先，看一下项目的结构：

5.

用到的一些图片如下：

6.

html代码如下：

!DOCTYPEhtmlhtmlheadmetacharset"UTF-8"metaname"viewport"content"widthdevice-width,initial-scale1.0"metahttp-equiv"X-UA-Compatible"content"ieedge"title梦幻西游/titlestylehtml,body,.container{height:100%;overflow:hidden;/*溢出了影藏*/}*{margin:0;padding:0;}.container{background:url('image/pic.png')no-repeat;/*背景图不重复*/background-size:cover;/*图片以最合适的尺寸铺满屏幕*/}.content{display:flex;/*变为块级元素才可设置宽和高*/margin:200pxauto0;/*上左右下auto代表水平方向居中*/width:780px;}.contentdiv{height:180px;width:200px;}.monkey{background:url('image/1.png');/*每一个图片得重复，因为要形成动图，背景图在走动，所以需要重复*/background-position:00;/*起始位置是（0,0）*/animation:monkeyMove1ssteps(8)infiniteboth;/*播放动画各参数代表含义是：动画名，动画时间，分8步把整个动画播放完，无限次数播放，播放完停留在最后一帧并且有延迟的话处在第一帧*/}/*制作动画移动轨迹monkeyMove是动画名*/@keyframesmonkeyMove{0%{background-position:00;}100%{/*移动了整个图片的宽度，保证第一帧和最后出现的画面是一样的*/background-position:-1600px0;}}.pig{background:url('image/2.png');/*每一个图片得重复，因为要形成动图，背景图在走动，所以需要重复*/background-position:00;/*起始位置是（0,0）*/animation:pigMove1ssteps(8)infiniteboth;/*播放动画各参数代表含义是：动画名，动画时间，分8步把整个动画播放完，无限次数播放，播放完停留在最后一帧并且有延迟的话处在第一帧*/}/*制作动画移动轨迹monkeyMove是动画名*/@keyframespigMove{0%{background-position:00;}100%{/*移动了整个图片的宽度，保证第一帧和最后出现的画面是一样的*/background-position:-1600px0;}}/*div.person（没有空格）:代表当前div样式名为person的元素div.person（有空格）:代表div的后代样式名为person的元素*/.contentdiv.person{width:170px;height:240px;;}.person{background:url(image/3.png);background-position:00;animation:personMove1ssteps(8)infiniteboth;/*为保证他们在同一水平线上，你可以把下边的样式去掉看一下其区别*/transform:translateY(-30px);}@keyframespersonMove{0%{background-position:00;}100%{background-position:-1360px0;}}.contentdiv.shasen{height:200px;width:210px;}.shasen{background:url('image/4.png');background-position:00;animation:shasenMove1ssteps(8)infiniteboth;}@keyframesshasenMove{0%{background-position:00;}100%{background-position:-1680px0;}}/style/headbodydivclass"container"divclass"content"divclass"monkey"/divdivclass"pig"/divdivclass"person"/divdivclass"shasen"/div/div/div/body/html7.

怎么样，小伙伴们，动手试一试吧！