CSS3背景动画移动内容

我有以下代码：

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

我试图使人体背景动画为云移动，但是整个页面都在滚动，以及背景。例如，如果您要运行上述代码，则文本"此内容正在移动，为什么？"会在移动。我该如何解决？

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

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

相关内容

最新更新

热门标签：