这个动画是怎么实现的？

Question

网易地址

拉倒底部会看到唐僧师徒。这个动画是怎么做出来的呢？我知道可能是css3 但是我看不懂他的写法。

Answer 1

原理很简单，将每个动作都设计好，放在一张图作为背景

然后用css3的动画，将这张图不停的进行移动

.west-03 {
    background-image: url(https://xyq.res.netease.com/pc/gw/20170118103441/img/west_03_f962447.png);
    background-repeat: no-repeat;
    animation: play03 1.4s steps(8) infinite;
}

@keyframes play03 {
    0% {
        background-position: 0 0
    }

    100% {
        background-position: -1360px 0
    }
}

还记得以前玩过的小人书吗

Answer 2

原图是这个原图
应该是用css3动画改变background-position实现动画效果

Answer 3

打开看了一下，应该是一张长图片作为背景图，然后一直更改背景图的background-position属性：

background-image: url(https://xyq.res.netease.com/pc/gw/20170118103441/img/west_02_47bad19.png);
background-repeat: no-repeat;
animation: play02 1.4s steps(8) infinite;

@keyframes play02{
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: -1600px 0;
    }
}

主要就是这几行代码了

Answer 4

demo

Answer 5

https://jsfiddle.net/tengqing...

Answer 6

写的背景图片，你可以去看它的代码
底部有共四张图，每张对应着一个人物，并且每张图上面有这个人物的各个动作
(
比如里面孙悟空的图：https://xyq.res.netease.com/p...
)。
然后应该是通过less或sass去动态控制的背景图的位置 每次取不同的动作