css背景图片移动

我在网站标题中有图片作为背景。现在，当页面加载时，我想从左向右缓慢移动（大约100像素），然后停止。有没有不太复杂的方法来做到这一点？css背景图片移动

2010-06-16 zuups

我只能说这个操作在今天的很多浏览器上都会很慢。您的用户在打开您的网站时会感到沮丧。也许你可以用动画gif达到你想要的效果。这可能会让你更快。 – ypnos 2010-06-16 16:45:07

jQuery将允许你轻松地做到这一点。

$("#theImage").animate({ 
    left: "+=100px", 
}, "slow");

来源

2010-06-16 16:48:47 Rap

您应该检查以确保它只在首页加载时动画，而不是从内部站点链接加载。我喜欢使用jquery这种事情。

// animate on first load only 
if (document.referrer == null || document.referrer.indexOf(window.location.hostname) < 0) { 
$("#logo").animate({ 
    marginLeft: "100px", 
    easing: 'swing' 
}, 3000); // adjust your duration here (milliseconds) 
} else { 
    // internal site link set the proper position 
    $("#logo").css({ marginLeft: "100px"}); 
}

来源

2010-06-16 16:52:52 ghoppe

谢谢，Rap和ghoppe！这是一个有用的提示。其实我是移动的背景图像，而不是它的容器，所以我第一次设置其CSS中的位置：

.top-back-image { background-position: -100px 0px; }

，然后使用jQuery：

$(".top-back-image").animate({ 
    backgroundPosition: "0px 0px", 
    easing: 'swing' 
}, 3000);

来源

2010-06-17 10:24:05 zuups

的家伙了，在LaunchList有一个移动背景。通过他们的CSS浏览，这是我发现的。也许它会有一些帮助。

#clouds { 
    width: 100%; 
    height: 650px; 
    top: 200px; 
    display: block; 
    position: fixed; 
    background: url(../art/cloud.png) 500px 0 repeat-x; 
    -webkit-animation-name: move; 
    -webkit-animation-duration: 400s; 
    -webkit-animation-iteration-count: infinite; 
    z-index: 2; 
}

请注意，这将仅针对webkit浏览器显示。

来源

2010-06-17 10:26:50

css背景图片移动

回答

相关问题