javascript - 这个动画是怎么实现的？

问题描述

问 题

网易地址

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

解决方案

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

然后用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
    }
}

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

这篇关于javascript - 这个动画是怎么实现的？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！