问答详情
源自:3-2 精灵动画的实现

精灵动画实现中的background-position像素是如何计算的?

@-webkit-keyframes person-slow {
        0% {
            background-position: -0px -291px;
        }
        25% {
            background-position: -602px -0px;
        }
        50% {
            background-position: -302px -291px;
        }
        75% {
            background-position: -151px -291px;
        }
        100% {
            background-position: -0px -291px;
        }
    }

提问者:MaxTan 2016-08-02 20:18

个回答

  • qq_申奇峰_0
    2016-08-03 17:52:26
    已采纳

    作者采用了“雪碧图”(将很多小图片放在一张大图中),通过移动position的x,y值来调整对应小图的位置

    图片是由设计给出的,我们现在只需把图片连贯起来;也就上上面的代码移动大图背景坐标,展现小图