Question

我在浏览器窗口的背景中创建了一个动画。它的云飘过去了。我设法让它们从屏幕开始，所以它们自然流入，但我无法弄清楚如何使它们从屏幕流出并消失。目前，它们继续经过屏幕边缘，导致浏览器窗口扩展，直到动画最终停止。正确的行为是动画从屏幕开始并继续到屏幕边缘以及更远处，当它离开包含它的div时消失。这是代码：

HTML

<div class="page-content">
    <div class="cloud1">
        <img src="~/Images/sunwave-cloud1.png" />
    </div>
    <div class="cloud2">
        <img src="~/Images/sunwave-cloud2.png" />
    </div>
    <div class="cloud3">
        <img src="~/Images/sunwave-cloud3.png" />
    </div>
    <div class="cloud4">
        <img src="~/Images/sunwave-cloud4.png" />
    </div>
    <!--CONTENT START-->
    <div class="box">
        @RenderBody()
    </div>
    <!--CONTENT END-->
</div>

CSS

.page-content {
    font-family: HelveticaNeue;
    margin-left: 10%;
    margin-right: 10%;
    padding-top: 50px;
    padding-bottom: 100px;
    max-width: 100%;
    height: auto;
    text-align: center;
}

.cloud1 {
    animation-name: cloud1;
    animation-duration: 25s;
    animation-iteration-count: infinite;
    position: absolute;
    top: 100px;
    left: -488px;
    z-index: -1;
}

.cloud2 {
    animation-name: cloud2;
    animation-duration: 25s;
    animation-delay: 10s;
    animation-iteration-count: infinite;
    position: absolute;
    top: 200px;
    left: -215px;
    z-index: -1;
}

.cloud3 {
    animation-name: cloud3;
    animation-duration: 20s;
    animation-delay: 7s;
    animation-iteration-count: infinite;
    position: absolute;
    top: 300px;
    left: -421px;
    z-index: -1;
}

.cloud4 {
    animation-name: cloud4;
    animation-duration: 30s;
    animation-delay: 10s;
    animation-iteration-count: infinite;
    position: absolute;
    top: 400px;
    left: -359px;
    z-index: -1;
}

所以问题是，要清楚的是，如何更改此代码（最好使用纯css），以便云不会扩展窗口，并且动画在离开屏幕后停止。

Answer 1

有一个名为overflow的css属性。它指定如果您的内容溢出元素框，会发生什么。在您的情况下，您的父元素wrapper应该具有：overflow: hidden;。

如果不起作用，您可以将相同的属性添加到body标签，并使用body { overflow: hidden; }防止任何元素溢出。

有关溢出属性here的更多信息。

更新：

溢出可以是水平和垂直的。溢出-x和溢出-y分别。

为了使隐藏溢出与包含position: absolute的子元素一起使用，您需要在父元素中指定css属性position: relative。

（在你的情况下你的元素与类＆＃34;包装器＆＃34;是父，并且应该具有相对位置，注意：从包装元素中展开你的标题。）

这是一个快速演示：jsfiddle。

Answer 2

您想要将overflow: hidden;指定给动画的父容器。

这告诉浏览器＆＃34;隐藏任何超出此元素范围的内容＆＃34;。

Answer 3

你可以使用 body{overflow-x:hidden} 或 body{overflow-Y:hidden} 如果你使用 body{overflow:hidden} 你不能向上或向下滚动

CSS动画延伸到屏幕边缘

3 个答案: