CSS 动画超出屏幕边缘

Question

我在浏览器的背景中创建了一个动画 window。是云飘过。我设法让它们从屏幕开始，以便它们自然流入，但我无法弄清楚如何让它们离开屏幕并消失。目前，它们继续越过屏幕边缘，导致浏览器 window 扩展，直到动画最终停止。正确的行为是动画从屏幕开始并继续到屏幕边缘及更远的地方，在离开包含它的 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）以使云彩不会扩展 window 并且动画会在它们结束后停止已离开屏幕。

Answer 1

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

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

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

更新：

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

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

（在你的情况下，你的 class "wrapper" 元素是 parent 并且应该有相对位置，注意：从包装元素中解开你的 header 。）

这是一个快速演示：jsfiddle。

Answer 2

您想指定overflow: hidden;到动画的父容器

这告诉浏览器，"hide anything that moves outside the bounds of this element"。

Answer 3

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

CSS 动画超出屏幕边缘

CSS animation extends past edge of screen

css

keyframe

css-animations