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