Ich versuche, mithilfe des CSS-Übergangs einen "Fade-In-Fade-Out" -Effekt zu erzielen. Aber ich kann das nicht mit dem Hintergrundbild zum Laufen bringen ...
Das CSS:
.title a {
display: block;
width: 340px;
height: 338px;
color: black;
background: transparent;
/* TRANSITION */
-webkit-transition: background 1s;
-moz-transition: background 1s;
-o-transition: background 1s;
transition: background 1s;
}
.title a:hover {
background: transparent;
background: url(https://lh3.googleusercontent.com/-p1nr1fkWKUo/T0zUp5CLO3I/AAAAAAAAAWg/jDiQ0cUBuKA/s800/red-pattern.png) repeat;
/* TRANSITION */
-webkit-transition: background 1s;
-moz-transition: background 1s;
-o-transition: background 1s;
transition: background 1s;
}
Schauen Sie sich das an: http://jsfiddle.net/AK3La/
css
background
background-image
css-transitions
Nick Zani
quelle
quelle
background-image
ist keine animierbare Eigenschaft ( w3.org/TR/css3-transitions/#animatable-properties ), daher ist Ihre Lösung nicht standardkonform.background
, und dies sollte verwendet werden (es funktioniert in Chrome für mich). Vielleicht hat sich die Spezifikation (oder das Impl) geändert, seit die Frage veröffentlicht wurdeDie Lösung (die ich selbst gefunden habe) ist ein Ninja-Trick. Ich kann Ihnen zwei Möglichkeiten anbieten:
Zuerst müssen Sie einen "Container" für das erstellen , der gleichzeitig Normal- und Schwebezustände
<img>
enthält :mit CSS3- Selektoren http://jsfiddle.net/eD2zL/1/ (wenn Sie diesen verwenden, ist der "normale" Status das erste Kind Ihres Containers oder ändern Sie die
nth-child()
Reihenfolge)CSS2- Lösung http://jsfiddle.net/eD2zL/2/ (Unterschiede zwischen sind nur einige Selektoren)
Grundsätzlich müssen Sie den "normalen" Zustand ausblenden und ihren "Schwebeflug" anzeigen, wenn Sie den Mauszeiger darüber halten
und das wars, ich hoffe jemand findet es nützlich.
quelle
Ich habe eine Lösung gefunden, die für mich funktioniert hat ...
Wenn Sie ein Listenelement (oder div) haben, das nur den Link enthält, und sagen wir, dies gilt für soziale Links auf Ihrer Seite zu Facebook, Twitter usw. Wenn Sie ein Sprite-Image verwenden, können Sie dies tun:
Machen Sie den Hintergrund des "li" zu Ihrem Schaltflächenbild
Machen Sie dann das Hintergrundbild des Links zum Schwebezustand der Schaltfläche. Fügen Sie auch das Deckkraftattribut hinzu und setzen Sie es auf 0.
Jetzt brauchen Sie nur noch "Deckkraft" unter "a: hover" und setzen dies auf 1.
Fügen Sie die Opazitätsübergangsattribute für jeden Browser zu "a" und "a: hover" hinzu, damit das endgültige CSS ungefähr so aussieht:
Wenn ich es richtig erklärt habe, dass Sie eine verblassende Schaltfläche für das Hintergrundbild haben sollten, hoffen Sie, dass es zumindest hilft!
quelle
Leider können Sie den Übergang nicht verwenden
background-image
, siehe die w3c-Liste der animierbaren Eigenschaften .Vielleicht möchten Sie ein paar Tricks mit machen
background-position
.quelle
Sie können Pseudoelemente verwenden, um den gewünschten Effekt zu erzielen, wie ich es in dieser Geige getan habe .
CSS:
HTML:
quelle
:after
Element, versuchen Einstellungwidth
undheight
wie100%
stattinherit
, 2) , wenn diebackground-image
tatsächlich in angezeigt Vordergrund , für die Verwendung negativer Index:after
Element:z-index: -1;
Wenn Sie jQuery verwenden können, können Sie das BgSwitcher- Plugin verwenden, um das Hintergrundbild mit Effekten zu wechseln. Es ist sehr einfach zu verwenden.
Zum Beispiel :
Fügen Sie Ihren eigenen Effekt hinzu, siehe Hinzufügen von Effekttypen
quelle
Versuchen Sie dies, damit der animierte Hintergrund im Web funktioniert, die mobile Hybrid-App jedoch nicht funktioniert
quelle
Da Hintergrundbilder nicht animiert werden können, habe ich ein kleines SCSS-Mixin erstellt, das den Übergang zwischen zwei verschiedenen Hintergrundbildern mithilfe von Pseudo-Selektoren vorher und nachher ermöglicht . Sie befinden sich auf verschiedenen Z-Index-Ebenen. Die vorausgehende beginnt mit der Deckkraft 0 und wird mit dem Schwebeflug sichtbar.
Sie können den gleichen Ansatz auch zum Erstellen von Animationen mit linearen Verläufen verwenden.
scss
Jetzt können Sie es einfach mit verwenden
Sie können es hier überprüfen: https://jsfiddle.net/pablosgpacheco/01rmg0qL/
quelle
Wenn Animieren
opacity
keine Option ist, können Sie auch animierenbackground-size
.Zum Beispiel habe ich dieses CSS verwendet, um a
backgound-image
mit einer Verzögerung festzulegen.quelle
.after
in.before
für das Hintergrundbild wünschen , müssen Sie das Hintergrundbild in einstellen.before
. Andernfalls verschwindet es einfach ohne Animation.Salam, diese Antwort funktioniert nur in Chrome, da IE und FF den Farbübergang unterstützen.
Sie müssen Ihre HTML-Elemente nicht erstellen, da
opacity:0
sie manchmal Text enthalten, und Sie müssen Ihre Elemente nicht verdoppeln!.Die Frage mit dem Link zu einem Beispiel in jsfiddle erforderte eine kleine Änderung, nämlich ein leeres Bild
.title a
wie dasbackground:url(link to an empty image);
gleiche einzufügen, aber ein leeres Bild zu.title a:hover
erstellen, und der Code funktioniert.Überprüfen Sie dies unter https://jsfiddle.net/Tobasi/vv8q9hum/
quelle
Mit Chris 'inspirierendem Beitrag hier:
https://css-tricks.com/different-transitions-for-hover-on-hover-off/
Ich habe es geschafft, mir Folgendes auszudenken:
quelle
Dies kann mit einer größeren browserübergreifenden Unterstützung als die akzeptierte Antwort erreicht werden, indem Pseudoelemente verwendet werden, wie in dieser Antwort veranschaulicht: https://stackoverflow.com/a/19818268/2602816
quelle
Ich hatte eine Weile damit zu kämpfen, ich benutzte zuerst einen Stapel Bilder übereinander und alle drei Sekunden versuchte ich, zum nächsten Bild im Stapel zu animieren und das aktuelle Bild auf den Boden des Stapels zu werfen. Gleichzeitig habe ich Animationen wie oben gezeigt verwendet. Ich konnte es nicht für mein Leben zum Laufen bringen.
Sie können diese Bibliothek verwenden, die ein dynamisch skaliertes, Diashow-fähiges Hintergrundbild mit jquery-backstretch ermöglicht.
https://github.com/jquery-backstretch/jquery-backstretch
quelle