我已经在浏览器窗口的背景中创建了一个动画。乌云飘过。我设法使它们离开屏幕,以便它们自然流入,但是我不知道如何使它们离开屏幕并消失。当前,它们继续经过屏幕边缘,导致浏览器窗口扩大,直到动画最终停止。正确的行为是使动画从屏幕开始,并继续到屏幕的边缘,甚至超出屏幕的边缘,在离开包含它的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),以使云不会扩展窗口,并且动画在离开屏幕后会停止。

最佳答案

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

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

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

更新:

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

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

(在您的情况下,类为“包装器”的元素是父级,并且应该具有相对位置,请注意:将标题从包装器元素中解包。)

这是一个快速演示:jsfiddle

10-05 20:56
查看更多