我有以下代码:
这是 CSS:
@keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
body {
background-image: url(http://puu.sh/hzABm/3768f6abbb.png);
background-position: 0px 0px;
background-repeat: repeat-x;
animation: animatedBackground 40s linear infinite;
-webkit-animation: animatedBackground 40s linear infinite;
}
适用于以下 HTML:
<body>
<div class="innercontent">
<p>This content is moving, why?</p>
</div>
</body>
我试图将 body 背景设置为移动的云彩，但整个页面都在滚动，连同背景。例如，如果您要运行上面的代码，文本“This content is moving, why?”会动的。我该如何解决这个问题？
最佳答案
我将向您展示一个使用您的代码的示例:
@keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
@-webkit-keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
@-ms-keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
@-moz-keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
#animate-area {
width: 560px;
height: 400px;
background-image: url(http://puu.sh/hzABm/3768f6abbb.png);
background-position: 0px 0px;
background-repeat: repeat-x;
animation: animatedBackground 40s linear infinite;
-ms-animation: animatedBackground 40s linear infinite;
-moz-animation: animatedBackground 40s linear infinite;
-webkit-animation: animatedBackground 40s linear infinite;
}<html><head>
</head>
<body>
<div id="animate-area"><p>This content is moving, why?</p></div>
</body></html>关于html - CSS3 背景动画移动内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30155247/