Użyj przejść CSS3 z tłem gradientowym

215

Próbuję przejść po najechaniu myszką za pomocą css na miniaturze, aby po najechaniu myszą gradient tła zanikał. Przejście nie działa, ale jeśli po prostu zmienię go na rgba()wartość, będzie działać dobrze. Czy gradienty nie są obsługiwane? Próbowałem też użyć obrazu, ale też go nie przeniesie.

Wiem, że to możliwe, ponieważ w innym poście ktoś to zrobił, ale nie wiem, jak dokładnie. Każda pomoc> Oto kilka CSS do pracy:

#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
źródło
5
IE10 obsługuje teraz przejścia gradientowe - była to szczęśliwa niespodzianka!
sirmdawg
@mkprogramming, woha, naprawdę działa i wygląda świetnie! Oto demo (działa z IE10 +). Mam nadzieję, że inne przeglądarki również otrzymają wsparcie dla tych fajnych rzeczy.
Qtax
Ta strona miała najlepsze rozwiązanie, działało dla mnie: nimbupani.com/some-css-transition-hacks.html
Tom Hagen

Odpowiedzi:

173

Gradienty nie obsługują jeszcze przejść (chociaż obecna specyfikacja mówi, że powinny one obsługiwać przejścia podobne do gradientu do podobnych przejść gradientu przez interpolację).

Jeśli chcesz uzyskać efekt przenikania z gradientem tła, musisz ustawić krycie na elemencie kontenera i „przerzucić” krycie.

(Było kilka wydań przeglądarki, które obsługiwały przejścia na gradientach (np. IE10. Testowałem przejścia gradientów w 2016 roku w IE i wydawały się wtedy działać, ale mój kod testowy już nie działa.)

Aktualizacja: październik 2018 Przejścia gradientowe z nową bez prefiksu nową składnią [np. Gradient radialny (...) teraz potwierdzono (ponownie?) Na Microsoft Edge 17.17134. Nie wiem, kiedy to zostało dodane. Nadal nie działa na najnowszych przeglądarkach Firefox i Chrome / Windows 10.

Michael Mullany
źródło
1
Co więcej, specyfikacja gradientu nie jest jeszcze ukończona, a opracowywanie aktualnej specyfikacji gradientu jest już daleko od obecnej implementacji -webkit-gradient.
c-smile
1
Przeglądarki Edge Webkit obsługują teraz nową specyfikację gradientu Mozilla-Heritage, a także starszą składnię WebKit. Mylące, oba mają prefiks -webkit
Michael Mullany
3
To, że IE10 w pełni obsługuje przejścia gradientowe.
Niet the Dark Absol
2
Czy możesz teraz dodać demonstrację używania przejść z gradientami? Nie mogę tego rozgryźć na podstawie twojej odpowiedzi (i nie mogę znaleźć innych wiadomości na ten temat). Ostatnio słyszałem, że nie można przechodzić między dwoma obrazami tła, jakie były gradienty.
Mackenzie McClane
98

Jednym z obejść jest przeniesienie pozycji tła, aby uzyskać efekt zmieniający się gradient: http://sapphion.com/2011/10/css3-gradient-transition-with-background-position/

Przejście gradientowe CSS3 z pozycją tła

Chociaż nie można bezpośrednio animować gradientów za pomocą właściwości przejścia CSS, możliwe jest animowanie właściwości background-position w celu uzyskania prostej animacji gradientu:

Kod tego jest bardzo prosty:

#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
źródło
31

Rozwiązaniem jest użycie położenia tła do naśladowania przejścia gradientu. To rozwiązanie zostało zastosowane w Bootstrap na Twitterze kilka miesięcy temu.

Aktualizacja

http://codersblock.blogspot.fr/2013/12/gradient-animation-trick.html?showComment=1390287622614

Oto szybki przykład:

Stan łącza

 .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;
}

Stan zawisu

.btn:hover {
   background-position: 0 0;
}
vinzcelavi
źródło
1
Twoja odpowiedź była odpowiednia przed jej edycją. Teraz nie jest to wcale odpowiedź, ale jedynie link do Twojej witryny. Cofam twoją odpowiedź do oryginału.
Andrew Barber,
Ok, nie ma problemu. Wystarczy wprowadzić niewielkie zmiany.
vinzcelavi,
2
Oto skrzypce: jsfiddle.net/Volker_E/RksTV Klucz to właściwość background-size, której nie można uzyskać w IE8. caniuse.com/#search=background-size Poza tym jest to miłe rozwiązanie.
Volker E.,
11

Oto, co warto, oto mixin Sassa:

Stosowanie:

@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;
        }
    }
}

Zaczerpnięte z tego niesamowitego posta na Medium od Dave'a Lunny'ego: https://medium.com/@dave_lunny/animating-css-gradients-using-only-css-d2fd7671e759

Ricardo Zea
źródło
1
Post na Medium jest bardzo pomocny, dziękuję za dodanie
Gendrith
9

Wiem, że to stare pytanie, ale niech ktoś się spodoba mojemu rozwiązaniu w czystym CSS. Gradient zanika od lewej do prawej.

.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.
źródło
3

Poniżej tag zakotwiczenia ma dziecko i wnuka. Wnuk ma szeroki gradient tła. Dziecko na bliskim tle jest przezroczyste, ale ma gradient do przejścia. Po najechaniu kursorem krycie dziecka zmienia się z 0 na 1 na 1 sekundę.

Oto 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;
}

A to jest HTML:

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

Powyższe jest testowane tylko w najnowszej wersji Chrome. Są to obrazy przed najechaniem kursorem, w połowie najechania kursorem iw pełni przeniesione po najechaniu kursorem:

Przed W połowie drogi Po

PaulQ
źródło
3

Częściowym obejściem przejścia gradientowego jest użycie cienia wstawki - możesz przejść sam cień cienia lub kolor tła - np. Jeśli utworzysz cień cienia w tym samym kolorze co tło, a następnie użyjesz przejścia na kolor tła, tworzy iluzję zwykłe tło zmienia się w gradient radialny

.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 Were Bouska
źródło
1
sprytne rozwiązanie, wstawiany cień może doskonale stworzyć iluzję gradientu
Aziz
2

Znalazłem niezły hack na codepen, który modyfikuje opacitywłaściwość, ale osiąga to zanikanie z jednego gradientu do drugiego poprzez wykorzystanie pseudoelementów. To, co robi, ustawia :aftertak, aby po zmianie krycia rzeczywistego elementu :afterelement pojawił się, aby wyglądał jak zanikanie. Pomyślałem, że warto się podzielić.

Oryginalny 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>

sierpień
źródło
2

W oparciu o kod css w twoim pytaniu wypróbowałem kod w następujący sposób i działa on dla mnie (uruchom fragment kodu) i spróbuj sam:

#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>

W oparciu o kod css w twoim pytaniu, wypróbowałem kod w następujący sposób i działa dla mnie, i spróbuj sam:

    #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;
}

Czy to działa dla ciebie? Zmień kolor w zależności od potrzeb :)

Raymond
źródło
1

Spróbuj użyć: przed i: po (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;}
Zaraz
źródło
1

Jak wspomniano. Gradienty nie są obecnie obsługiwane w CSS Transitions. Ale w niektórych przypadkach można obejść ten problem, ustawiając jeden z kolorów na przezroczysty, aby kolor tła innego elementu owijającego świecił, i zamiast tego przechodził.

Jens
źródło
1

Używam tego w pracy :) IE6 + https://gist.github.com/GrzegorzPerko/7183390

Nie zapomnij o tym, <element class="ahover"><span>Text</span></a>czy używasz elementu tekstowego.

.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
źródło
0

Nie może zaszkodzić opublikowanie innego widoku, ponieważ nadal nie ma oficjalnego sposobu na zrobienie tego. Napisałem lekką wtyczkę jQuery, za pomocą której możesz zdefiniować gradient promieniowy tła i prędkość przejścia. To podstawowe użycie pozwoli następnie na zanikanie, zoptymalizowane za pomocą requestAnimationFrame (bardzo płynnie):

$('#element').gradientFade({

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

http://codepen.io/Shikkediel/pen/xbRaZz?editors=001

Zachowuje oryginalne tło i wszystkie właściwości nienaruszone. Ma również ustawienie podświetlania jako ustawienie:

http://codepen.io/Shikkediel/pen/VYRZZY?editors=001

Shikkediel
źródło
0

Chciałem, aby div wyglądał jak sfera 3D i przechodził przez kolory. Odkryłem, że gradientowe kolory tła nie zmieniają się (jeszcze). Umieściłem radialne tło gradientowe przed elementem (używając indeksu Z) z przejściowym jednolitym tłem.

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

następnie div.ballpod spodem:

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

następnie zmieniłem kolor tła div.balli voila!

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

rushkeldon
źródło