【发布时间】：2019-02-06 23:06:15
【问题描述】：
我正在寻找一些关于如何实现类似于史酷比或其他卡通动画的移动背景的帮助 - 例如，按下按钮时，背景从右向左滑动，角色动画（启动 GIF 动画)。
我正在创建一个将坐在左侧 div 上的动画角色。单击角色后，角色后面的 div（整个背景和其中的其他 div）将从右向左滑动，并且新的 div 容器将滑入以填补空白。所以基本上看起来角色是在走路，但实际上他身后的背景是从右到左移动的。
我确信这一定是以前实现过的，但正在寻找一些关于如何最好地实现它的指针。任何帮助将不胜感激。
我的想法是触发时会有一些动作：
- GIF 动画开始
- 整个 div 从右向左滑动
- 现在显示新的 div（被隐藏）
- 新 div 从右向左滑动，在旧 div 后面
- 旧 div 被隐藏
我发现的问题是创建一个响应式站点，因此移动的 div 的大小不会有 px 值而是百分比值。
如果有人以前处理过类似的事情或有一些指示，将不胜感激。
谢谢，
尼克
【问题讨论】：
-
负边距或background-size：覆盖，你可以改变背景位置，所以看起来像幻灯片。可能需要背景重复以进行无限循环。并且实际上无法直接启动 GIF 动画 - 有一种解决方法 - 将第一帧静态图像替换为实际的 GIF。
-
“问题”我不明白你不能用百分比做什么？仍然可以使用 JS 计算
$(window).width()或.height()
标签： javascript jquery html css animation