CSS 动画超出屏幕边缘

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

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

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

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

更新：

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

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

（在您的情况下，您的“包装器”类元素是父元素，并且应该具有相对位置，注意：从包装器元素中解开您的标题。）

这是一个快速演示：jsfiddle。

Answer 2

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

这告诉浏览器，“隐藏任何超出该元素边界的东西”。

Answer 3

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