CSS3 Einblendeffekt

Question

a {
    float: left;
    width: 32px;
    height: 32px;
    text-align: left;
    text-indent:-9999px;
    background: url('../img/button.png') no-repeat 0 0;

    -webkit-transition: background 300ms ease-in 2s; /* property duration timing-function delay */
    -moz-transition: background 300ms ease-in 2s;
    -o-transition: background 300ms ease-in 2s;
    transition: background 300ms ease-in 2s;

    -webkit-transition-property: background;
    -webkit-transition-duration: 300ms;
    -webkit-transition-timing-function: ease-in;
    -webkit-transition-delay: 100ms;

    -moz-transition-property: background;
    -moz-transition-duration: 300ms;
    -moz-transition-timing-function: ease-in;
    -moz-transition-delay: 100ms;

    -o-transition-property: background;
    -o-transition-duration: 300ms;
    -o-transition-timing-function: ease-in;
    -o-transition-delay: 100ms;

    transition-property: background;
    transition-duration: 300ms;
    transition-timing-function: ease-in;
    transition-delay: 100ms;

}

a:hover {
    background:position: 0 -32px;
}

derzeit hat es scroll up/down-Effekt, aber ich möchte den Hintergrund mit Fade-Effekt zu ändern, was sollte ich in der CSS ändern?

Danke!

Answer 1

Sie können nicht zwischen zwei Hintergrundbildern übergehen, da der Browser nicht weiß, was Sie interpolieren wollen. Wie Sie bereits festgestellt haben, können Sie die Position des Hintergrunds ändern. Wenn Sie möchten, dass das Bild beim Überfahren mit der Maus eingeblendet wird, sollten Sie das Bild am besten mit CSS-Übergängen auf ein enthaltendes Element setzen und dann die Hintergrundfarbe auf dem Link selbst transparent machen:

span {
    background: url(button.png) no-repeat 0 0;
}
a {
    width: 32px;
    height: 32px;
    text-align: left;
    background: rgb(255,255,255);

    -webkit-transition: background 300ms ease-in 200ms; /* property duration timing-function delay */
    -moz-transition: background 300ms ease-in 200ms;
    -o-transition: background 300ms ease-in 200ms;
    transition: background 300ms ease-in 200ms;
    }
a:hover {
    background: rgba(255,255,255,0);
}

Answer 2

Der Bildlaufeffekt wird durch die Angabe der allgemeinen Eigenschaft "background" in Ihrer CSS anstelle des spezifischeren background-image verursacht. Durch die Einstellung der Eigenschaft background wird die Animation zwischen allen Eigenschaften übergehen. Hintergrund-Farbe, Hintergrund-Bild, Hintergrund-Position Etc Dadurch wird der Scroll-Effekt verursacht..

z.B.

a {
-webkit-transition-property: background-image 300ms ease-in 200ms;
-moz-transition-property: background-image 300ms ease-in 200ms;
-o-transition-property: background-image 300ms ease-in 200ms;
transition: background-image 300ms ease-in 200ms;
}

Answer 3

Das ist möglich, verwenden Sie die unten stehende Struktur:

<li><a><span></span></a></li>
<li><a><span></span></a></li>

usw...

Wo die <li> enthält eine <a> Anker-Tag, das wie oben gezeigt eine Spanne enthält. Fügen Sie dann das folgende css ein:

• LI erhalten position: relative;
• Geben Sie <a> Tag a height , width
• Satz <span> width & height auf 100%, so dass sowohl <a> y <span> gleiche Abmessungen haben
• Beide <a> y <span> bekommen. position: relative; .
• Jedem Element das gleiche Hintergrundbild zuweisen
• <a> Tag wird das 'OFF' haben background-position y el <span> wird die Option 'ON' haben background-poisiton .
• Für den Zustand "AUS" verwenden Sie die Deckkraft 0 für <span>
• Für 'ON' :hover Zustand Opazität 1 verwenden für <span>
• Setzen Sie die -webkit o -moz Übergang auf die <span> Element

Sie haben die Möglichkeit, den Übergangseffekt zu verwenden, während Sie weiterhin die alte background-position tauschen. Vergessen Sie nicht, den IE-Alpha-Filter einzufügen.