CSS3 - 精靈圖像的「背景位置」之間的淡出

我想在精靈圖像的「背景位置」與CSS之間淡出。我發現很多教程，但我沒有找到像這樣簡單的東西：CSS3 - 精靈圖像的「背景位置」之間的淡出

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>CSS3 - Fade between 'background-position' of a sprite image</title> 
<style type="text/css"> 
div{ 
    width: 120px; 
    height: 60px; 

    background-image:  url('sprite.jpg'); 
    background-repeat:  no-repeat; 
    background-position: 0 0; 

} 
div:hover{ 
    background-position: 0 -60px; 
} 
</style> 
</head> 
<body> 
<div></div> 
</html>

謝謝。

來源

2013-04-09 CBuzatu

什麼不起作用？ – chriz 2013-04-09 10:50:08

淡入淡出不起作用。 – CBuzatu 2013-04-09 10:50:58

你還沒有設置任何淡入淡出。您可以使用javascript或css3動畫來實現，具體取決於您希望支持的瀏覽器數量。 – Kyle 2013-04-09 10:51:30

我找到了答案，無論如何。

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>CSS3 - Fade between 'background-position' of a sprite image</title> 
<style type="text/css"> 
#button{ 
    float:     left; 
    background-image:  url('sprite.jpg'); 
    background-position: 0 -60px; 
    background-repeat:  no-repeat; 

    width:    120px; 
    height:    60px; 
} 
#button a{ 
    background-image:  url('sprite.jpg'); 
    background-position: 0 0; 
    background-repeat:  no-repeat; 

    width:    120px; 
    height:    60px; 

    display:   block; 
    text-indent:  -9999px; 

    transition:   opacity 0.3s ease-in-out; 
    -moz-transition: opacity 0.3s ease-in-out; 
    -webkit-transition: opacity 0.3s ease-in-out; 
    -o-transition:  opacity 0.3s ease-in-out; 
} 
#button a:hover, 
#button a:focus{ 
    opacity:   0; 
} 


</style> 
</head> 
<body> 
<div id="button"><a href="#"></a></div> 
</html>

來源

2013-04-09 11:11:04 CBuzatu

使用這樣的：

div{ 
    width: 120px; 
    height: 60px; 

    background-image: url('sprite.jpg'); 
    background-repeat: no-repeat; 
    background-position: 0 0; 
    transition: background-position 1s ease; 

}

而且不要忘了可選的供應商前綴

編輯：

我注意到你需要褪色。您嘗試類似的解決方案是這樣的：

div{ 
    background: url(foo.jpg) no-repeat 0 0 transparent; 
    transition: background: 1s ease; 
} 

div:hover{ 
    background: rgba(0, 0, 0, 1); 
}

我不能嘗試這個，怎麼把」聊天室從移動。

來源

2013-04-09 10:51:09

這將滑動bg圖像，而不是將其淡入淡出。 – Kyle 2013-04-09 10:51:54

這不是在精靈圖像的位置之間淡入淡出。 – CBuzatu 2013-04-09 10:53:11

'div'是透明的，它會顯示一個白色頁面，懸停時會褪去黑色....我不明白你的嘗試。 – CBuzatu 2013-04-09 11:05:10

所以基本上，你需要在:hover

background-position變化
fadein效果進行兩件事情在這種情況下

CSS3過渡不會是有用的。您可以使用CSS3動畫屬性。

動畫屬性接受name的動畫和持續時間。多個動畫名稱可以用逗號分隔。

您需要定義這些動畫名稱。它們可以是您選擇的任何字符串，但您需要定義它們。所以考慮這個CSS：

div:hover{ 
    animation: fadein 10s, bp 0.5s; 
    -moz-animation: fadein 10s, bp 0.5s; /* Firefox */ 
    -webkit-animation: fadein 10s, bp 0.5s; /* Safari and Chrome */ 
    -o-animation: fadein 10s, bp 0.5s; 
    background-position:0 0; 
} 
@-webkit-keyframes fadein { /* Safari and Chrome */ 
    from { 
     opacity:0; 
    } 
    to { 
     opacity:1; 
    } 
} 
@-webkit-keyframes bp { /* Safari and Chrome */ 
    from { 
     background-position:-200px 0; 
    } 
    to { 
     background-position:0 0; 
    } 
}

看到這個fiddle，完整的瀏覽器支持動畫

注意：它不會在IE < 9工作是肯定的！它可能在IE9中（不確定）。

來源

2013-04-09 10:55:42

這是一張幻燈片，而不是一個精靈的背景位置之間的衰落 – CBuzatu 2013-04-09 10:57:05

@CBuzatu現在看到我的答案！ – 2013-04-09 11:25:51

您可以使用CSS3 Animation與@keyframes

div:hover{ 
    animation: logo 2s 0 linear; 
} 
@keyframes logo{ 
    0% { opacity: 1; } 
    5% { opacity: 0; } 
    50% { background-position: 0 -60px; opacity: 0; } 
    100% { background-position: 0 -60px; opacity: 1; } 
}

例子：http://jsfiddle.net/Y8W9S/

當然，現在你必須調整你要實現的時間和效果。

希望它是幫助或指向正確的方向。

好運。

來源

2013-04-09 11:18:59 gmo

CSS3 - 精靈圖像的「背景位置」之間的淡出

回答

相關問題