Question

我有以下代码：

这里是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>

我试图将身体背景设置为动画云，但整个页面都与背景一起滚动。例如，如果你要运行上面的代码，文本＆＃34;这个内容正在移动，为什么？＆＃34;会动的。我该如何解决这个问题？

Answer 1

我向您展示了使用代码的示例：

@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>

CSS3背景动画移动内容

1 个答案: