5

CSSだけでスプライト画像の「背景位置」の間をフェードさせたい。多くのチュートリアルを見つけましたが、次のような単純なものは見つかりませんでした:

<!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>

ありがとうございました。

4

4 に答える 4

5

私は答えを見つけました、とにかくありがとう。

<!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-09T11:11:04.653 に答える
2

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-09T11:18:59.317 に答える
0

次のように使用します。

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-09T10:51:09.410 に答える