精灵动画实现中的background-position像素是如何计算的？-慕课网

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

来源：3-2 精灵动画的实现

MaxTan

2016-08-02 20:18

@-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;
        }
    }

写回答关注

1回答

qq_申奇峰_0

2016-08-03 17:52:26

已采纳

作者采用了“雪碧图”（将很多小图片放在一张大图中），通过移动position的x，y值来调整对应小图的位置
图片是由设计给出的，我们现在只需把图片连贯起来；也就上上面的代码移动大图背景坐标，展现小图

1 0

MaxTan

非常感谢！

2016-08-09 20:59:40

共 1 条回复 >

H5+JS+CSS3实现七夕言情

为七夕节准备的H5+JS+CSS3特效案例，由浅入深案例拆分讲解

211524 学习 · 540 问题

查看课程

相似问题

width: (slides.length * width) + 'px',这句如何计算的呢？

回答 1

background-position为什么都是取负值？怎么定位的？

回答 2

var proportionX = (girl.getOffset().left - boy.getWidth() + girl.getWidth() / 5) / visualWidth;这些坐标是如何计算的

回答 1

请问为什么我的页面始终实现不了动画啊？

回答 2

boy.setFlolerWalk()和walkRun()中的slowWalk()两个动画是不是重叠了？

回答 2

打开慕课网App查看更多内容