html背景超出隐藏,html - 内容和溢出问题：当窗口变小时，背景中的动画隐藏 - 堆栈内存溢出...

因此，我有一个动画(云)，它从屏幕的左侧(左边距：-1000px)到屏幕的右侧(左边距：100％)运行。 为了防止弹出水平滚动条，我将主体的overflow-x设置为隐藏。 我的内容位于背景动画的顶部，并且将主体的最小宽度设置为1000px。 我需要为另一个需要保留的动画保留主体的最小宽度，因此我不能仅仅为了“简单”的解决方案而放弃它。 无论如何，问题是当我将窗口的大小调整为小于1000px宽时，由于溢出设置，我的内容最终将被砍掉，并变得不可读。 有人可以采取某种变通办法来保护我的财产吗？

HTML

hello

world!

CSS

body {

min-width: 1000px;

background-color: #D6F3FF;

overflow-x: hidden;

}

@keyframes animateCloud {

0% { margin-left: -1000px; }

100% { margin-left: 100%; }

}

.x1 {

animation: animateCloud 35s linear infinite;

transform: scale(0.65);

}

.cloud {

background: #fff;

border-radius: 100px;

height: 120px;

position: relative;

width: 350px;

}

.header-container {

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

width: 100%;

height: 600px;

}

.header {

background-color: #7CED99;

width: 60%;

height: 275px;

text-align: center;

}

我已经考虑过在窗口达到最小宽度时使用@media进行操作，并且我尝试弄乱了div，该div保留了背景动画，例如将其溢出设置为隐藏且宽度设置为100％ ，但是当我缩小窗口然后将其恢复为原始大小时，它将使宽度保持缩小的大小，并切断动画的一部分。

#background-wrap {

bottom: 0;

left: 0;

padding-top: 70px;

position: absolute;

right: 0;

top: 0;

z-index: -1;

height: 1000px;

width: 100%;

overflow-x: hidden;

}

让我知道您是否可以提出任何解决方案。 提前致谢！