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背景圖片移動

回答

相關問題