Verwenden Sie CSS3-Übergänge mit Verlaufshintergrund

215

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)))
}
alt
quelle
5
IE10 unterstützt jetzt Gradientenübergänge - es war eine glückliche Überraschung!
Sirmdawg
@mkprogramming, woha, es macht wirklich und sieht toll aus! Hier ist eine Demo (funktioniert mit IE10 +). Hoffe, dass andere Browser auch Unterstützung für dieses coole Zeug bekommen.
Qtax
Diese Seite hatte die beste Lösung, funktionierte für mich: nimbupani.com/some-css-transition-hacks.html
Tom Hagen

Antworten:

173

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.

Michael Mullany
quelle
1
Darüber hinaus ist die Gradientenspezifikation noch nicht abgeschlossen und die aktuelle Entwicklung der Gradientenspezifikation ist bereits weit von der aktuellen Implementierung des Webkit-Gradienten entfernt.
c-smile
1
Edge-Webkit-Browser unterstützen jetzt jedoch die neue Mozilla-Heritage-Gradientenspezifikation sowie die ältere Webkit-Syntax. Verwirrenderweise sind beide - Webkit-Präfix
Michael Mullany
3
Dass dieser IE10 Gradientenübergänge vollständig unterstützt.
Niet the Dark Absol
2
Können Sie jetzt eine Demonstration zur Verwendung von Übergängen mit Verläufen hinzufügen? Ich kann es anscheinend nicht anhand Ihrer Antwort herausfinden (und kann keine anderen Nachrichten darüber finden). Das letzte, was ich gehört habe, ist, dass man nicht zwischen zwei Hintergrundbildern wechseln kann, was Gradienten waren.
Mackenzie McClane
98

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/

CSS3-Gradientenübergang mit Hintergrundposition

Obwohl Sie Farbverläufe nicht direkt mit der CSS-Übergangseigenschaft animieren können, können Sie die Hintergrundpositionseigenschaft animieren, um eine einfache Verlaufsanimation zu erzielen:

Der Code dafür ist denkbar einfach:

#DemoGradient{  
    background: -webkit-linear-gradient(#C7D3DC,#5B798E);  
    background: -moz-linear-gradient(#C7D3DC,#5B798E);  
    background: -o-linear-gradient(#C7D3DC,#5B798E);  
    background: linear-gradient(#C7D3DC,#5B798E);  
  
    -webkit-transition: background 1s ease-out;  
    -moz-transition: background 1s ease-out;  
    -o-transition: background 1s ease-out;  
    transition: background 1s ease-out;  
  
    background-size:1px 200px;  
    border-radius: 10px;  
    border: 1px solid #839DB0;  
    cursor:pointer;  
    width: 150px;  
    height: 100px;  
}  
#DemoGradient:Hover{  
    background-position:100px;  
}  
<div id="DemoGradient"></div>  

Alan
quelle
31

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

 .btn {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  font-weight: 300;
  position: relative;
  display: inline-block;
  text-decoration: none;
  color: #fff;
  padding: 20px 40px;
  background-image: -moz-linear-gradient(top, #50abdf, #1f78aa);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#50abdf), to(#1f78aa));
  background-image: -webkit-linear-gradient(top, #50abdf, #1f78aa);
  background-image: -o-linear-gradient(top, #50abdf, #1f78aa);
  background-image: linear-gradient(to bottom, #50abdf, #1f78aa);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff50abdf', endColorstr='#ff1f78aa', GradientType=0);
  background-repeat: repeat-y;
  background-size: 100% 90px;
  background-position: 0 -30px;
  -webkit-transition: all 0.2s linear;
     -moz-transition: all 0.2s linear;
       -o-transition: all 0.2s linear;
          transition: all 0.2s linear;
}

Schwebezustand

.btn:hover {
   background-position: 0 0;
}
vinzcelavi
quelle
1
Ihre Antwort war angemessen, bevor Sie sie bearbeitet haben. Es ist jetzt überhaupt keine Antwort mehr, sondern lediglich ein Link zu Ihrer Website. Ich werde Ihre Antwort auf das Original zurücksetzen.
Andrew Barber
OK, kein Problem. Sie müssen nur geringfügige Änderungen vornehmen.
Vinzcelavi
2
Und hier ist eine Geige dafür: jsfiddle.net/Volker_E/RksTV Der Schlüssel ist die Eigenschaft background-size, die Sie in IE8 nicht können. caniuse.com/#search=background-size Abgesehen davon ist es eine schöne Lösung.
Volker E.
11

Für das, was es wert ist, hier ist ein Sass-Mixin:

Verwendung:

@include gradientAnimation(red, blue, .6s);

Mixin:

@mixin gradientAnimation( $start, $end, $transTime ){
    background-size: 100%;
    background-image: linear-gradient($start, $end);
    position: relative;
    z-index: 100;
    &:before {
        background-image: linear-gradient($end, $start);
        content: "";
        display: block;
        height: 100%;
        position: absolute;
        top: 0; left: 0;
        opacity: 0;
        width: 100%;
        z-index: -100;
        transition: opacity $transTime;
    }
    &:hover {
        &:before {
            opacity: 1;
        }
    }
}

Entnommen aus diesem großartigen Beitrag auf Medium von Dave Lunny: https://medium.com/@dave_lunny/animating-css-gradients-using-only-css-d2fd7671e759

Ricardo Zea
quelle
1
Der Beitrag auf Medium ist sehr hilfreich, danke für das Hinzufügen
Gendrith
9

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.

.contener{
  background-image:url('http://www.imgbase.info/images/safe-wallpapers/digital_art/3d_landscape/9655_3d_landscape.jpg');   width:300px;
  height:200px;
  background-size:cover;
  border:solid 2px black;
}
.ed {
    width: 0px;
    height: 200px;
    background:linear-gradient(to right, rgba(0,0,255,0.75), rgba(255,0,0,0.75));
    position: relative;
    opacity:0;
    transition:width 20s, opacity 0.6s;
}

.contener:hover .ed{
    width: 300px;
    background:linear-gradient(to right, rgba(0,0,255,0.75), rgba(255,0,0,0.75));
    position: relative;
    opacity:1;
    transition:width 0.4s, opacity 1.1s;
    transition-delay: width 2s;
    
    animation-name: gradient-fade;
    animation-duration: 1.1s;   
    -webkit-animation-name: gradient-fade; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 1.1s; /* Chrome, Safari, Opera */
}




/* ANIMATION */
@-webkit-keyframes gradient-fade {
    0%   {background:linear-gradient(to right, rgba(0,0,255,0), rgba(255,0,0,0));}
    2%  {background:linear-gradient(to right, rgba(0,0,255,0.01875), rgba(255,0,0,0));}
    4%  {background:linear-gradient(to right, rgba(0,0,255,0.0375), rgba(255,0,0,0.0));}
    6%  {background:linear-gradient(to right, rgba(0,0,255,0.05625), rgba(255,0,0,0.0));}
    8% {background:linear-gradient(to right, rgba(0,0,255,0.075), rgba(255,0,0,0));}
    10%  {background:linear-gradient(to right, rgba(0,0,255,0.09375), rgba(255,0,0,0));}
    12%   {background:linear-gradient(to right, rgba(0,0,255,0.1125), rgba(255,0,0,0));}
    14%  {background:linear-gradient(to right, rgba(0,0,255,0.13125), rgba(255,0,0,0));}
    16%  {background:linear-gradient(to right, rgba(0,0,255,0.15), rgba(255,0,0,0));}
    18%  {background:linear-gradient(to right, rgba(0,0,255,0.16875), rgba(255,0,0,0));}
    20% {background:linear-gradient(to right, rgba(0,0,255,0.1875), rgba(255,0,0,0));}
    22%  {background:linear-gradient(to right, rgba(0,0,255,0.20625), rgba(255,0,0,0.01875));}
    24%   {background:linear-gradient(to right, rgba(0,0,255,0.225), rgba(255,0,0,0.0375));}
    26%  {background:linear-gradient(to right, rgba(0,0,255,0.24375), rgba(255,0,0,0.05625));}
    28%  {background:linear-gradient(to right, rgba(0,0,255,0.2625), rgba(255,0,0,0.075));}
    30%  {background:linear-gradient(to right, rgba(0,0,255,0.28125), rgba(255,0,0,0.09375));}
    32% {background:linear-gradient(to right, rgba(0,0,255,0.3), rgba(255,0,0,0.1125));}
    34%  {background:linear-gradient(to right, rgba(0,0,255,0.31875), rgba(255,0,0,0.13125));}
    36%   {background:linear-gradient(to right, rgba(0,0,255,0.3375), rgba(255,0,0,0.15));}
    38%  {background:linear-gradient(to right, rgba(0,0,255,0.35625), rgba(255,0,0,0.16875));}
    40%  {background:linear-gradient(to right, rgba(0,0,255,0.375), rgba(255,0,0,0.1875));}
    42%  {background:linear-gradient(to right, rgba(0,0,255,0.39375), rgba(255,0,0,0.20625));}
    44% {background:linear-gradient(to right, rgba(0,0,255,0.4125), rgba(255,0,0,0.225));}
    46%  {background:linear-gradient(to right, rgba(0,0,255,0.43125),rgba(255,0,0,0.24375));}
    48%   {background:linear-gradient(to right, rgba(0,0,255,0.45), rgba(255,0,0,0.2625));}
    50%  {background:linear-gradient(to right, rgba(0,0,255,0.46875), rgba(255,0,0,0.28125));}
    52%  {background:linear-gradient(to right, rgba(0,0,255,0.4875), rgba(255,0,0,0.3));}
    54%   {background:linear-gradient(to right, rgba(0,0,255,0.50625), rgba(255,0,0,0.31875));}
    56%  {background:linear-gradient(to right, rgba(0,0,255,0.525), rgba(255,0,0,0.3375));}
    58%  {background:linear-gradient(to right, rgba(0,0,255,0.54375), rgba(255,0,0,0.35625));}
    60%  {background:linear-gradient(to right, rgba(0,0,255,0.5625), rgba(255,0,0,0.375));}
    62% {background:linear-gradient(to right, rgba(0,0,255,0.58125), rgba(255,0,0,0.39375));}
    64%  {background:linear-gradient(to right,rgba(0,0,255,0.6), rgba(255,0,0,0.4125));}
    66%   {background:linear-gradient(to right, rgba(0,0,255,0.61875), rgba(255,0,0,0.43125));}
    68%  {background:linear-gradient(to right, rgba(0,0,255,0.6375), rgba(255,0,0,0.45));}
    70%  {background:linear-gradient(to right, rgba(0,0,255,0.65625), rgba(255,0,0,0.46875));}
    72%  {background:linear-gradient(to right, rgba(0,0,255,0.675), rgba(255,0,0,0.4875));}
    74% {background:linear-gradient(to right, rgba(0,0,255,0.69375), rgba(255,0,0,0.50625));}
    76%  {background:linear-gradient(to right, rgba(0,0,255,0.7125), rgba(255,0,0,0.525));}
    78%   {background:linear-gradient(to right, rgba(0,0,255,0.73125),,rgba(255,0,0,0.54375));}
    80%  {background:linear-gradient(to right, rgba(0,0,255,0.75), rgba(255,0,0,0.5625));}
    82%  {background:linear-gradient(to right, rgba(0,0,255,0.75), rgba(255,0,0,0.58125));}
    84%  {background:linear-gradient(to right, rgba(0,0,255,0.75),rgba(255,0,0,0.6));}
    86% {background:linear-gradient(to right, rgba(0,0,255,0.75), rgba(255,0,0,0.61875));}
    88%  {background:linear-gradient(to right, rgba(0,0,255,0.75), rgba(255,0,0,0.6375));}
    90%   {background:linear-gradient(to right, rgba(0,0,255,0.75), rgba(255,0,0,0.65625));}
    92%  {background:linear-gradient(to right, rgba(0,0,255,0.75), rgba(255,0,0,0.675));}
    94%  {background:linear-gradient(to right, rgba(0,0,255,0.75),rgba(255,0,0,0.69375));}
    96%  {background:linear-gradient(to right, rgba(0,0,255,0.75), rgba(255,0,0,0.7125));}
    98% {background:linear-gradient(to right, rgba(0,0,255,0.75), rgba(255,0,0,0.73125),);}
    100%  {background:linear-gradient(to right, rgba(0,0,255,0.75), rgba(255,0,0,0.75));}
}
<div class="contener" style="">
  <div class="ed"></div>
</div>

Skylin R.
quelle
3

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:

.bkgrndfar {
  position:absolute;
  top:0;
  left:0;
  z-index:-2;
  height:100%;
  width:100%;
  background:linear-gradient(#eee, #aaa);
}

.bkgrndnear {
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:100%;
  background:radial-gradient(at 50% 50%, blue 1%, aqua 100%);
  opacity:0;
  transition: opacity 1s;
}

a.menulnk {
  position:relative;
  text-decoration:none;
  color:#333;
  padding: 0 20px;
  text-align:center;
  line-height:27px;
  float:left;
}

a.menulnk:hover {
  color:#eee;
  text-decoration:underline;
}

/* This transitions child opacity on parent hover */
a.menulnk:hover .bkgrndnear {
  opacity:1;
}

Und das ist der HTML:

<a href="#" class="menulnk">Transgradient
<div class="bkgrndfar">
  <div class="bkgrndnear">
  </div>
</div>
</a>

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:

Vor Auf halber Strecke Nach dem

PaulQ
quelle
3

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

.button SPAN {
    padding: 10px 30px; 
    border: 1px solid ##009CC5;

    -moz-box-shadow: inset 0 0 20px 1px #00a7d1;
    -webkit-box-shadow: inset 0 0 20px 1px#00a7d1;
    box-shadow: inset 0 0 20px 1px #00a7d1; 

    background-color: #00a7d1;
    -webkit-transition: background-color 0.5s linear;
    -moz-transition: background-color 0.5s linear;
    -o-transition: background-color 0.5s linear;
    transition: background-color 0.5s linear;
}

.button SPAN:hover {
    background-color: #00c5f7; 
}
Frantisek waren Bouska
quelle
1
clevere Lösung, eingefügter Schatten kann die Gradientenillusion perfekt erzeugen
Aziz
2

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:after Element , 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

.button {
  display: inline-block;
  margin-top: 10%;
  padding: 1em 2em;
  font-size: 2em;
  color: #fff;
  font-family: arial, sans-serif;
  text-decoration: none;
  border-radius: 0.3em;
  position: relative;
  background-color: #ccc;
  background-image: linear-gradient(to top, #6d8aa0, #8ba2b4);
  -webkit-backface-visibility: hidden;
  z-index: 1;
}
.button:after {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 0.3em;
  background-image: linear-gradient(to top, #ca5f5e, #d68584);
  transition: opacity 0.5s ease-out;
  z-index: 2;
  opacity: 0;
}
.button:hover:after {
  opacity: 1;
}
.button span {
  position: relative;
  z-index: 3;
}
body {
  text-align: center;
  background: #ddd;
}
<a class="button" href="#"><span>BUTTON</span></a>

aug
quelle
2

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:

#container div a {
  display: inline-block;
  margin-top: 10%;
  padding: 1em 2em;
  font-size: 2em;
  color: #fff;
  font-family: arial, sans-serif;
  text-decoration: none;
  border-radius: 0.3em;
  position: relative;
  background-color: #ccc;
  background-image: linear-gradient(to top, #C0357E, #EE5840);
  -webkit-backface-visibility: hidden;
  z-index: 1;
}
     
#container div a:after {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 0.3em;
  background-image: linear-gradient(to top, #6d8aa0, #343436);
  transition: opacity 0.5s ease-out;
  z-index: 2;
  opacity: 0;
}
    
#container div a:hover:after {
  opacity: 1;
}
#container div a span {
  position: relative;
  z-index: 3;
}
<div id="container"><div><a href="#"><span>Press Me</span></a></div></div>

Basierend auf dem CSS-Code in Ihrer Frage habe ich folgenden Code ausprobiert und er funktioniert für mich. Bitte versuchen Sie es selbst:

    #container div a {
  display: inline-block;
  margin-top: 10%;
  padding: 1em 2em;
  font-size: 2em;
  color: #fff;
  font-family: arial, sans-serif;
  text-decoration: none;
  border-radius: 0.3em;
  position: relative;
  background-color: #ccc;
  background-image: linear-gradient(to top, #C0357E, #EE5840);
  -webkit-backface-visibility: hidden;
  z-index: 1;
}

#container div a:after {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 0.3em;
  background-image: linear-gradient(to top, #6d8aa0, #343436);
  transition: opacity 0.5s ease-out;
  z-index: 2;
  opacity: 0;
}

#container div a:hover:after {
  opacity: 1;
}
#container div a span {
  position: relative;
  z-index: 3;
}

Funktioniert es bei dir? Ändern Sie die Farbe nach Ihren Wünschen :)

Raymond
quelle
1

Versuchen Sie es mit: vor und: nach (ie9 +)

#wrapper{
    width:400px;
    height:400px;
    margin:0 auto;
    border: 1px #000 solid;
    position:relative;}
#wrapper:after,
#wrapper:before{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    content:'';
    background: #1e5799;
    background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8));
    background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
    background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
    background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
    background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
    opacity:1;
    z-index:-1;
    -webkit-transition: all 2s ease-out;
    -moz-transition: all 2s ease-out;
    -ms-transition: all 2s ease-out;
    -o-transition: all 2s ease-out;
    transition: all 2s ease-out;
}
#wrapper:after{
    opacity:0;
    background: #87e0fd;
    background: -moz-linear-gradient(top, #87e0fd 0%, #53cbf1 40%, #05abe0 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#87e0fd), color-stop(40%,#53cbf1), color-stop(100%,#05abe0));
    background: -webkit-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%);
    background: -o-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%);
    background: -ms-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%);
    background: linear-gradient(to bottom, #87e0fd 0%,#53cbf1 40%,#05abe0 100%);
}
#wrapper:hover:before{opacity:0;}
#wrapper:hover:after{opacity:1;}
Anon
quelle
1

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.

Jens
quelle
1

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.

.ahover {
    display: block;
    /** text-indent: -999em; ** if u use only only img **/
    position: relative;
}
.ahover:after {
    content: "";
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transition: all 0.5s ease 0s;
    width: 100%;
    z-index: 1;
}
.ahover:hover:after {
    opacity: 1;
}
.ahover span {
    display: block;
    position: relative;
    z-index: 2;
}
Davton
quelle
0

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):

$('#element').gradientFade({

    duration: 2000,
    from: '(20,20,20,1)',
    to: '(120,120,120,0)'
});

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

Shikkediel
quelle
0

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.

/* overlay */
z-index : 1;
background : radial-gradient( ellipse at 25% 25%, rgba( 255, 255, 255, 0 ) 0%, rgba( 0, 0, 0, 1 ) 100% );

dann das div.balldarunter:

transition : all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);

dann änderte sich die Hintergrundfarbe von div.ballund voila!

https://codepen.io/keldon/pen/dzPxZP

Rushkeldon
quelle