没有看懂@-webkit-keyframes person-slow {}里位置是怎么变化的
来源：3-2 精灵动画的实现
dou1235
2016-03-08 14:23
原图是横着一排人拼成的一个大图 从0% 到100%我没有看懂图片的位置是如何切换的 初始 -0px -291px 具体在什么位置 从0%到25% 怎么就变成-602px了呢 这又是怎么移动的，完全不明白，希望真懂的 可以解释下 谢谢了
写回答
关注
2回答
-
- 黑猫灵狐
- 2016-08-27 11:46:22
你把boy那张大图打开看一下就明白了，就是有boy各种姿势的图片，这里用到了第一排第5张图片和第二排的前三张图片，第一个动作是右腿向上，所以是第一排第5张图片，x坐标是-602px，y坐标-0px，第二个动作是左腿跟上，用的是第二排第3张图片，x坐标-302px，y坐标-291px，第三个动作是左腿向上迈，用的是第二排第2张图片，x坐标-151px，y坐标-291px，最后一个动作是回到初始图片，也就是第二排第1张图片，x坐标0px，y坐标-291px，明白了吗
-
- 慕莱坞1975833
- 2016-03-08 14:54:39
原理就像是flash的关键帧
H5+JS+CSS3实现七夕言情
为七夕节准备的H5+JS+CSS3特效案例，由浅入深案例拆分讲解
211525 学习 · 540 问题
相似问题