css - CSS3 关键帧动画的位置根据窗口大小而变化

Question

我在使用 CSS3 制作关键帧动画时遇到了一些问题。动画图像的位置根据窗口/屏幕大小而变化。我试图找到解决这个问题的方法，但我迷路了。我试图指定一个边界，以便动画只在边界内播放，但它不起作用。

参见 here , 并尝试调整窗口大小。我知道这与 position:absolute 有关。我的最终目标是让空间背景从左向右移动，但如果有意义的话，它仍然位于中心。

感谢您的帮助。

Answer 1

---

问题是 margin-left 和 margin-right 属性被设置为 auto，这会调整 tdr-main 的左边距，而 space-bg的动画修改绝对左侧位置。当窗口调整到较小尺寸时，tdr-main 上的左边距缩小到 45px，但背景图像上的左侧位置仍然在绝对 342px 和 450px 之间移动。

如果您将 space-bg 嵌入到具有自动边距的同一个容器中，

<div id="tdr-main">
        <div id="space-bg">
        </div>
        [...]
</div>

然后两者都将保持居中，而 space-bg 上的位置将相对于居中的容器 div。只需将 z-index 与绝对或相对定位结合使用，即可使内容正确堆叠。