CSS3 - Fade zwischen 'background-position' ein sprite-Bild

Ich möchte zu verblassen zwischen 'background-position' ein sprite-Bild nur mit CSS. Ich fand eine Menge o tutorials, aber ich habe nicht gefunden, etwas einfaches wie diese:

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

Danke.

was nicht funktioniert?
Fade funktioniert nicht.
Sie haben nicht keine setup-schwindet. Sie können es entweder mit javascript oder css3-Animationen, je nachdem, wie viele Browser, die Sie unterstützen möchten.

InformationsquelleAutor CBuzatu | 2013-04-09

  1. 3

    Ich die Antwort gefunden, trotzdem danke.

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

    InformationsquelleAutor CBuzatu

  2. 2

    Können Sie CSS3 Animation mit @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; }
}

    Beispiel: http://jsfiddle.net/Y8W9S/

    Natürlich, jetzt Sie anpassen, um die Zeiten und die Wirkung, die Sie umsetzen wollen.

    Hoffe, dass es hilft, oder zeigen Sie in die richtige Richtung.

    Glück.

    InformationsquelleAutor gmo

  3. 2

    also im Grunde müssen Sie zwei Dinge auf :hover

    1. background-position ändern
    2. fadein Wirkung

    CSS3 transition nicht hilfreich in diesem Fall.
    Sie können die Verwendung der CSS3-Eigenschaft animation.

    animation-Eigenschaft akzeptiert name von der animation und die Dauer. Mehrere animation-Namen bereitgestellt werden können, die durch Komma getrennt.

    müssen Sie definieren, diese animation Namen.Sie können eine beliebige Zeichenfolge Ihrer Wahl, aber Sie brauchen, um diese zu definieren.
    beachten Sie daher Folgendes 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;
    }
}

    sehen diese fiddle, für die komplette browser unterstützt die animation

    HINWEIS: es funktioniert nicht in IE<9 sicher! und es könnte in IE9(nicht sicher).

    das ist eine Folie, kein fading zwischen einem background-position eines sprite
    siehe meine Antwort jetzt!

    InformationsquelleAutor Manish Mishra

  4. 0

    Verwenden, wie diese:

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

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

}

    Und nicht zu vergessen die optional vendor-Präfixe

    Edit:

    Hab ich gemerkt, Sie müssen verblassen. Sie versuchen, ähnliche Lösung wie diese:

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

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

    Ich kann nicht versuchen, diese, coz' im aus mobile.

    Das wird schieben Sie das bg-Bild, anstatt fade in und out.
    Dies ist nicht fade zwischen der position eines sprite-Bild.
    Die div ist transparent und es erscheint eine weiße Seite, und auf hover wird fade to black.... Ich verstehe nicht, was du versucht hast.
    du bist willkommen...

    InformationsquelleAutor Arpad Bajzath

Schreibe einen Kommentar