0

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

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

谢谢你的帮助。

4

1 回答 1

0

问题是 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 来保持正确堆叠。

于 2012-12-27T02:30:24.393 回答