Question

所以我有一个动画（云）从屏幕左侧（边距左侧：-1000px）到屏幕右侧（边距左侧：100％）。为了防止水平滚动弹出，我已将body的overflow-x设置为隐藏。我的内容集中在背景动画的顶部，我已将主体的最小宽度设置为1000px。我需要为我需要的另一个动画保留身体的最小宽度，所以我无法摆脱那个简单的＆＃34;解。无论如何，问题是当我将窗口大小调整为小于1000px宽度时，我的内容最终会因溢出设置而被切断，并且变得不可读。有没有人可以采取某种解决方法来保护我拥有的东西？

HTML

<body>
 <div id="background-wrap">
    <div class="x1">
        <div class="cloud"></div>
    </div>
 </div>
<div class="header-container">
    <div class="header">
        <span class="header-text">hello</span>
        <span class="header-sub-text">world!</span>
    </div>
</div>
</body>

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，就像这样将溢出设置为隐藏并设置宽度到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;
}

如果您能提出任何解决方案，请告诉我。提前谢谢！

内容和溢出问题：当窗口变小时隐藏在背景中的动画

0 个答案: