CSS3 background-position des Bildes übergang
Möchte ich ein CSS3 hover-Effekt auf meine website-logo. Einfach, Recht? Gut es funktioniert, aber nicht so, wie ich es mir vorstelle.
Der oberen Hälfte ist es der reguläre Zustand und die untere Hälfte ist die :hover-Zustand.
Habe ich die standard-CSS für die änderung der background-position :hover, aber die CSS3-übergang verschiebt das Bild nach oben und unten mit der position. Stattdessen möchte ich es einfach nur fade in und out an die neue position.
Ist das möglich, beim arbeiten mit einem Bild und zwei Positionen oder muss ich zwei getrennte Bilder (was nicht passiert)?
Ich denke, zwei. CSS3 ist kein Ersatz für JS...
ich weiß nicht wirklich verstehen, was Sie versuchen zu erreichen, können Sie geben ein Beispiel (oder zumindest klären, ein bisschen mehr - wollen Sie Ihr image zu ändern, nur seine Obere Hälfte, oder Sie wollen Ihr Bild zu verblassen, und ein neues Bild einblenden)?
Ich machte eine Seite zu zeigen, meine situation. scferg.com/logoexamples.html
Sie müssen mindestens 2 Elemente. 1. überlagerungen 2nd. am 1.: wenn 1. der Deckkraft ändert sich zu 0 => 2. gezeigt wird mit "Fade". Sie können mit dem gleichen hintergrund(empfohlen) aus, und spielen Sie einfach mit background-Position.
ich weiß nicht wirklich verstehen, was Sie versuchen zu erreichen, können Sie geben ein Beispiel (oder zumindest klären, ein bisschen mehr - wollen Sie Ihr image zu ändern, nur seine Obere Hälfte, oder Sie wollen Ihr Bild zu verblassen, und ein neues Bild einblenden)?
Ich machte eine Seite zu zeigen, meine situation. scferg.com/logoexamples.html
Sie müssen mindestens 2 Elemente. 1. überlagerungen 2nd. am 1.: wenn 1. der Deckkraft ändert sich zu 0 => 2. gezeigt wird mit "Fade". Sie können mit dem gleichen hintergrund(empfohlen) aus, und spielen Sie einfach mit background-Position.
InformationsquelleAutor Sean | 2011-04-22
Du musst angemeldet sein, um einen Kommentar abzugeben.
Brauchen Sie nicht zwei separate Bilder, aber Sie müssen zwei separate Elemente in die position Ihres Logos.
Siehe live-version hier: http://jsfiddle.net/BdY79/
In der Praxis, werden Sie wahrscheinlich wollen, verknüpfen Sie Ihr logo und Sie können den tag dazu, es gibt also keine extra-markup. Außerdem degradiert anmutig.
InformationsquelleAutor methodofaction
Diese nicht erwähnt, hintergrund, position, animation...
Webkit-nur 🙁
Via: http://jsfiddle.net/hfXSs/
Mehr hier: http://css-tricks.com/parallax-background-css3/
InformationsquelleAutor Foxinni
Ja, es ist möglich, aber Sie können nicht verwenden Sie einen einfachen übergang müssen Sie eine CSS-animation mit 4 keyframes
InformationsquelleAutor Michael Mullany
https://gordonlesti.com/css-background-transitions-with-image-sprites/
InformationsquelleAutor X-NicON