Ich versuche, beim Schweben mit CSS über ein Miniaturbild zu wechseln, damit beim Schweben der Hintergrundverlauf eingeblendet wird. Der Übergang funktioniert nicht, aber wenn ich ihn einfach in einen rgba()Wert ändere , funktioniert er einwandfrei. Werden Farbverläufe nicht unterstützt? Ich habe auch versucht, ein Bild zu verwenden, es wird das Bild auch nicht überführen.
Ich weiß, dass es möglich ist, wie in einem anderen Beitrag, aber jemand kann nicht herausfinden, wie genau. Hilfe> Hier ist ein CSS, mit dem Sie arbeiten können:
#container div a {
-webkit-transition: background 0.2s linear;
-moz-transition: background 0.2s linear;
-o-transition: background 0.2s linear;
transition: background 0.2s linear;
position: absolute;
width: 200px;
height: 150px;
border: 1px #000 solid;
margin: 30px;
z-index: 2
}
#container div a:hover {
background: -webkit-gradient(radial, 100 75, 100, 100 75, 0, from(rgba(0, 0, 0, .7)), to(rgba(0, 0, 0, .4)))
}
Antworten:
Farbverläufe unterstützen noch keine Übergänge (obwohl die aktuelle Spezifikation besagt, dass sie einen Gradienten unterstützen sollten, um Gradientenübergänge über Interpolation zu mögen.).
Wenn Sie einen Einblendeffekt mit einem Hintergrundverlauf wünschen, müssen Sie eine Deckkraft für ein Containerelement festlegen und die Deckkraft "übergehen".
(Es gab einige Browserversionen, die Übergänge auf Verläufen unterstützten (z. B. IE10. Ich habe Gradientenübergänge 2016 im IE getestet und sie schienen zu diesem Zeitpunkt zu funktionieren, aber mein Testcode funktioniert nicht mehr.)
Update: Oktober 2018 Verlaufsübergänge mit nicht vorangestellter neuer Syntax [z. B. Radialverlauf (...)] wurden jetzt (erneut?) Für Microsoft Edge 17.17134 bestätigt. Ich weiß nicht, wann dies hinzugefügt wurde. Funktioniert immer noch nicht mit den neuesten Versionen von Firefox & Chrome / Windows 10.
quelle
Eine Problemumgehung besteht darin, die Hintergrundposition zu ändern, um den Effekt zu erzielen, dass sich der Verlauf ändert: http://sapphion.com/2011/10/css3-gradient-transition-with-background-position/
quelle
Eine Lösung besteht darin, die Hintergrundposition zu verwenden , um den Gradientenübergang nachzuahmen. Diese Lösung wurde vor einigen Monaten in Twitter Bootstrap verwendet.
Aktualisieren
http://codersblock.blogspot.fr/2013/12/gradient-animation-trick.html?showComment=1390287622614
Hier ist ein kurzes Beispiel:
Verbindungsstatus
Schwebezustand
quelle
background-size, die Sie in IE8 nicht können. caniuse.com/#search=background-size Abgesehen davon ist es eine schöne Lösung.Für das, was es wert ist, hier ist ein Sass-Mixin:
Verwendung:
@include gradientAnimation(red, blue, .6s);Mixin:
Entnommen aus diesem großartigen Beitrag auf Medium von Dave Lunny: https://medium.com/@dave_lunny/animating-css-gradients-using-only-css-d2fd7671e759
quelle
Ich weiß, dass das eine alte Frage ist, aber vielleicht genießt jemand meine Art der Lösung in reinem CSS. Farbverlauf von links nach rechts verblassen.
quelle
Im Folgenden hat ein Ankertag ein Kind und ein Enkelkind. Das Enkelkind hat den fernen Hintergrundgradienten. Das Kind im nahen Hintergrund ist transparent, hat aber den Gradienten, zu dem es übergehen kann. Beim Schweben wird die Deckkraft des Kindes über einen Zeitraum von 1 Sekunde von 0 auf 1 geändert.
Hier ist das CSS:
Und das ist der HTML:
Das Obige wird nur in der neuesten Version von Chrome getestet. Dies sind die Bilder vor dem Schweben, auf halber Strecke und vollständig übergangenem Schweben:
quelle
Eine teilweise Problemumgehung für den Verlaufsübergang besteht darin, den eingefügten Boxschatten zu verwenden. Sie können entweder den Boxschatten selbst oder die Hintergrundfarbe übergehen. Wenn Sie beispielsweise einen eingefügten Boxschatten mit derselben Farbe wie der Hintergrund erstellen und dann den Übergang für die Hintergrundfarbe verwenden, entsteht eine Illusion Dieser einfache Hintergrund ändert sich in einen radialen Gradienten
quelle
Sie können Übergänge zwischen Verläufen fälschen, indem Sie Übergänge in der Deckkraft einiger gestapelter Verläufe verwenden, wie in einigen der Antworten hier beschrieben:
CSS3-Animation mit Verläufen .
Sie können stattdessen auch die Position wechseln, wie hier beschrieben:
CSS3-Gradientenübergang mit Hintergrundposition .
Einige weitere Techniken hier:
Animieren von CSS3-Verläufen .
quelle
Es wurde ein netter Hack auf Codepen gefunden, der die
opacityEigenschaft modifiziert, aber das Überblenden von einem Gradienten zum anderen durch die Nutzung von Pseudoelementen erreicht. Was er tut, ist, dass er ein:afterso einstellt , dass, wenn Sie die Deckkraft des tatsächlichen Elements ändern, das:afterElement , sodass es so aussieht, als wäre es eine Überblendung. Ich dachte, es wäre nützlich zu teilen.Ursprünglicher Codepen: http://codepen.io/sashtown/pen/DfdHh
quelle
Basierend auf dem CSS-Code in Ihrer Frage habe ich folgenden Code ausprobiert und er funktioniert für mich (führen Sie das Code-Snippet aus). Bitte versuchen Sie es selbst:
Basierend auf dem CSS-Code in Ihrer Frage habe ich folgenden Code ausprobiert und er funktioniert für mich. Bitte versuchen Sie es selbst:
Funktioniert es bei dir? Ändern Sie die Farbe nach Ihren Wünschen :)
quelle
Versuchen Sie es mit: vor und: nach (ie9 +)
quelle
Wie erwähnt. Farbverläufe werden derzeit bei CSS-Übergängen nicht unterstützt. In einigen Fällen können Sie dies jedoch umgehen, indem Sie eine der Farben auf transparent setzen, sodass die Hintergrundfarbe eines anderen Umhüllungselements durchscheint, und diese stattdessen übergehen.
quelle
Ich benutze dies bei der Arbeit :) IE6 + https://gist.github.com/GrzegorzPerko/7183390
Vergessen Sie nicht,
<element class="ahover"><span>Text</span></a>wenn Sie ein Textelement verwenden.quelle
Es kann nicht schaden, eine andere Ansicht zu veröffentlichen, da es immer noch keinen offiziellen Weg gibt, dies zu tun. Schrieb ein leichtes jQuery-Plugin, mit dem Sie einen radialen Hintergrundgradienten und eine Übergangsgeschwindigkeit definieren können. Diese grundlegende Verwendung lässt es dann einblenden, optimiert mit requestAnimationFrame (sehr flüssig):
http://codepen.io/Shikkediel/pen/xbRaZz?editors=001
Behält den ursprünglichen Hintergrund und alle Eigenschaften bei. Hat auch Highlight-Tracking als Einstellung:
http://codepen.io/Shikkediel/pen/VYRZZY?editors=001
quelle
Ich wollte, dass ein Div wie eine 3D-Kugel erscheint und durch Farben übergeht. Ich habe festgestellt, dass Hintergrundfarben mit Farbverlauf (noch) nicht übergehen. Ich habe einen radialen Verlaufshintergrund vor das Element gestellt (unter Verwendung des Z-Index) mit einem übergehenden festen Hintergrund.
dann das
div.balldarunter:dann änderte sich die Hintergrundfarbe von
div.ballund voila!https://codepen.io/keldon/pen/dzPxZP
quelle