CSS3背景圖像位置轉換

我想在我的網站徽標上使用CSS3懸停效果。很簡單，對吧？它的工作原理，但不是我想要的方式。CSS3背景圖像位置轉換

Link to my logo

它的上半部分是常規狀態，下半部分是：懸停狀態。

我有用於更改背景位置的標準CSS：hover，但CSS3過渡將圖像上下滑動並顯示位置。相反，我希望它淡入淡出到新的位置。

這是可能的，當處理一個圖像和兩個位置，或者我將不得不做兩個單獨的圖像（這是沒有發生）？

來源

2011-04-22 Sean

我想兩項。 CSS3不是JS的替代品... – Blender 2011-04-22 23:20:16

我不太瞭解什麼你是否想要實現，你是否可以給出一個工作的例子（或者至少澄清一點 - 你想讓你的圖像只改變它的上半部分，或者你希望你的圖像淡出和淡入一個新的圖像）？ – Maverick 2011-04-22 23:47:29

我做了一個頁面來演示我的情況。 http://scferg.com/logoexamples.html – Sean 2011-04-23 02:30:39

是的，它是可能的，但你不能用一個簡單的過渡，你將不得不使用一個CSS動畫與4個關鍵幀

0% - opacity 1 
49% - opacity 0 
50% - move to new position, opacity 0 
100% - opacity 1

來源

2011-04-22 23:43:06

你不需要兩個單獨的圖像，但你需要兩個獨立的元素來定位你的標誌。

見真人版在這裏：http://jsfiddle.net/BdY79/

.logo { 
    width: 282px; 
    height: 69px; 
    background: #fff url(http://scferg.com/wp-content/themes/austere/images/logo.png) 0 -69px no-repeat; 
    overflow: hidden; 
} 

.logo img { 
    background-color: #fff; 
    -webkit-transition: opacity 200ms ease; 
    -moz-transition: opacity 200ms ease; 
    -o-transition: opacity 200ms ease; 
} 

.logo img:hover { 
    opacity: 0; 
}

在實踐中，你可能要鏈接的標誌，你可以使用標籤來做到這一點，所以沒有額外的標記。它也優雅地退化。

來源

2011-04-24 03:24:54 Duopixel

這沒有提到的背景位置動畫...

.box { 
    display:block; 
    height:300px; 
    width:300px; 
    background:url('http://lorempixum.com/300/300') no-repeat; 
    background-position:-300px; 
    -webkit-transition:background-position 1s ease; 
} 

.box:hover{ 
    background-position:0px; 
}

的Webkit只有 :(

途經：http://jsfiddle.net/hfXSs/

來源

2012-06-04 23:27:28 Foxinni

CSS3背景圖像位置轉換

回答

相關問題