                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /H5+JS+CSS3实现七夕言情

没有看懂@-webkit-keyframes person-slow {}里位置是怎么变化的

原图是横着一排人拼成的一个大图从0% 到100%我没有看懂图片的位置是如何切换的初始 -0px -291px 具体在什么位置从0%到25% 怎么就变成-602px了呢这又是怎么移动的，完全不明白，希望真懂的可以解释下谢谢了

dou1235

2016-03-08

源自：H5+JS+CSS3实现七夕言情 3-2

关注问题我要回答

1414

操作

收起

2 回答

黑猫灵狐
2016-08-27

你把boy那张大图打开看一下就明白了，就是有boy各种姿势的图片，这里用到了第一排第5张图片和第二排的前三张图片，第一个动作是右腿向上，所以是第一排第5张图片，x坐标是-602px，y坐标-0px，第二个动作是左腿跟上，用的是第二排第3张图片，x坐标-302px，y坐标-291px，第三个动作是左腿向上迈，用的是第二排第2张图片，x坐标-151px，y坐标-291px，最后一个动作是回到初始图片，也就是第二排第1张图片，x坐标0px，y坐标-291px，明白了吗