我正在尝试使用背景图像制作一个简单的效果。我试图让它非常缓慢地向左移动，然后在看到整个图像后停止。
此刻图像根本没有移动。
<!DOCTYPE html>
<html>
<head>
<style>
body
{
width:100%;
height:100px;
top:0;
background-image:url('http://upload.wikimedia.org/wikipedia/commons/0/0c/Yercaud_scenery.jpg');
position:relative;
-webkit-animation:mymove 4s infinite; /* Safari and Chrome */
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
0% {top:0px;left:-70px;}
25% {top:0px;left:-50px;}
75% {top:0px;left:30px;}
100% {top:0px;left:31px}
}
</style>
</head>
<body>
<p>here is some sample text</p>
</body>
</html>
如有任何帮助，我们将不胜感激。 我不仅限于使用 css，但如果可能的话我会更喜欢。
最佳答案
我不想通过 CSS 使用关键帧，而是想要更轻便、更简单的东西。我似乎找到了一个涉及使用几行 jquery 和 css 的解决方案。
Javascript:
<script>
$(function(){
$("body").animate({backgroundPositionX : "-450"}, 25000);
});
</script>
CSS:
<style type="text/css">
body {
background-image: url('../imgs/bg-image.jpg');
background-repeat:repeat-x;
}
</style>
关于jquery - 缓慢滑动的页面背景图片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13389406/