文章/答案/技术大牛

发布

社区首页 >问答首页 >缓慢滑动页面背景图像

问缓慢滑动页面背景图像
EN

Stack Overflow用户

提问于 2012-11-15 07:49:27

回答 1查看 2K关注 0票数 1

我正在尝试使用背景图像来制作suttle效果。我试着让它非常缓慢地向左移动，然后在看到整个图像后停止。

此时，图像根本不会移动。

<!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，但如果可能的话，我会更喜欢。

jquery

css

css-transitions

回答 1

Stack Overflow用户

回答已采纳

发布于 2012-11-18 03:40:06

而不是通过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>

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/13389406

复制

相似问题

问缓慢滑动页面背景图像
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问缓慢滑动页面背景图像EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问缓慢滑动页面背景图像
EN