Bre.ad有这样的背景,它不断移动,并有一个面包师的卡车在路上的错觉.我想知道如何完成,可以做到这一点,使图像垂直移动而不是水平移动？
解决方法
整个背景是这个长png文件,城市的风景和云层是透明的背景png,它们分布在多个div中.
背景(镇)：
城市景观：
相关HTML从页面来源：
<div id="bread-world">
<div id="puffyclouds" style="background-position: 0 -75px"></div>
<div id="cityscape" style="background-position: 0 105px;"></div>
<div id="ocean"></div>
<div id="town" style="background-position: 0 0;"></div>
<div id="truck"></div>
</div>
和all.css的相关CSS
#town{
background:url('//bread-images.s3.amazonaws.com/invite/town.png?1308363721')
repeat-x 542px 0px;
width:5806px;
left:0;
bottom:0;
height:599px;
position:absolute
}
对于其他div来说也是如此. repeat-x属性用于重复背景,以模拟连续滚动的效果.此外,图像的左端和右端排列,以便平滑过渡.
动画由homepage.js完成,缓慢地将背景位置线性偏移.相关内容如下：
function r(){
m.css({backgroundPosition:"0 -75px"}).animate({backgroundPosition:q+"px -75px"},{duration:n,easing:"linear"}),k.css({backgroundPosition:"0 0"}).animate({backgroundPosition:o+"px 0"},l.css({backgroundPosition:"0 105px"}).animate({backgroundPosition:p+"px 105px"},easing:"linear",complete:r})
}
