网页有静态背景，我希望动画在页面内容滚动时也保持静态。这可以做到吗？当前，当页面滚动时，动画也会滚动
这里是我自己编的一个粗略的例子。这是我第一次使用 css 动画。我一直在寻找答案，但只真正找到了带有滚动事件的动画。
html {
background: url(http://img15.deviantart.net/1294/i/2010/260/9/8/sample_background_001_by_professormegaman-d2yxb7g.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
z-index:-2;
}
img{
width:100px;
}
.car-right {
position: absolute;
top: 86%;
left: 0px;
z-index: -1;
background-color: red;
animation-duration: 15s;
animation-name: goRight;
animation-iteration-count: infinite;
-moz-animation-duration: 15s;
-moz-animation-name: goRight;
-moz-animation-iteration-count: infinite;
}
.car-left {
position: absolute;
top: 15%;
left: 0px;
z-index: -1;
background-color: blue;
animation-duration: 10s;
animation-name: goLeft;
animation-iteration-count: infinite;
-moz-animation-duration: 10s;
-moz-animation-name: goLeft;
-moz-animation-iteration-count: infinite;
}
@keyframes goRight {
from {
-webkit-transform: translate(0,0);
}
to {
-webkit-transform: translate(700px,0);
}
}
@-moz-keyframes goRight {
from {
-moz-transform: translate(0,0);
}
to {
-moz-transform: translate(700px,0);
}
}
@keyframes goLeft{
from {
-webkit-transform: translate(700px,0);
}
to {
-webkit-transform: translate(0,0);
}
}
@-moz-keyframes goLeft{
from {
-moz-transform: translate(700px,0);
}
to {
-moz-transform: translate(0,0);
}
}<html>
<head>
</head>
<body>
<div class="animation-container">
<div class="car-right">
<img class="car-right-image"src="http://www.freeiconspng.com/uploads/car-png-10.png" alt="car">
</div>
<div class="car-left">
<img class="car-left-image"src="http://www.freeiconspng.com/uploads/car-png-10.png" alt="car">
</div>
</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
</body>
</html>最佳答案
尝试添加
.animation-container {
position: fixed;
height: 100%;
}
关于html - 如何保持动画背景并让页面滚动？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42015229/