Degrade arka planlı CSS3 geçişlerini kullanma


215

Fareyle üzerine gelindiğinde, küçük resim üzerinde fareyle geçiş yapmaya çalışıyorum, böylece fareyle üzerine gelindiğinde arka plan gradyanı kaybolur. Geçiş çalışmıyor, ancak yalnızca bir rgba() değere iyi çalışıyor. Degradeler desteklenmiyor mu? Ben de bir görüntü kullanmayı denedim, bu görüntü de geçiş olmaz.

Başka bir gönderide olduğu gibi, bunun mümkün olduğunu biliyorum, ama tam olarak nasıl olduğunu anlayamıyorum. Herhangi bir yardım> İşte çalışmak için bazı CSS:

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

5
IE10 şimdi degrade geçişlerini destekliyor - mutlu bir sürpriz oldu!
sirmdawg

@mkprogramming, woha, gerçekten iyi ve harika görünüyor! İşte bir demo (IE10 + ile çalışır). Umarım diğer tarayıcılar da bu harika şeyler için destek alır.
Qtax

Bu site en iyi çözümü buldu, benim için çalıştı: nimbupani.com/some-css-transition-hacks.html
Tom Hagen

Yanıtlar:


173

Degradeler henüz geçişleri desteklemez (mevcut spesifikasyon, enterpolasyon yoluyla benzer degrade geçişlerine degrade gibi desteklenmeleri gerektiğini söylüyor olsa da).

Eğer bir soldurma-bir arka plan gradyan ile yürürlüğe istiyorsanız, bir ayarlamak zorunda opaklığı bir kap elemanı ve 'opaklığını transition`.

(Degradeler üzerindeki geçişleri destekleyen bazı tarayıcı sürümleri olmuştur (örn. IE10. 2016'da IE'de degrade geçişlerini test ettim ve o anda çalışıyor gibi görünüyordu, ancak test kodum artık çalışmıyor.)

Güncelleştirme: Ekim 2018 Microsoft Edge 17.17134'te öneksiz yeni sözdizimi [örneğin radyal degrade (...)] içeren gradyan geçişlerinin artık (tekrar?) Çalıştığı onaylandı. Bunun ne zaman eklendiğini bilmiyorum. Hala en yeni Firefox ve Chrome / Windows 10 üzerinde çalışmıyor.


1
Ayrıca, degrade spec henüz bitmedi ve şimdiki -webkit-degrade uygulamasından çok uzak olan geçerli degrade spec gelişimi.
c-smile

1
Ancak edge webkit tarayıcıları artık eski webkit sözdiziminin yanı sıra yeni mozilla-miras gradyan spesifikasyonunu da destekliyor. Şaşırtıcı bir şekilde, ikisi de -webkit ön ekine sahip
Michael Mullany

3
IE10'un degrade geçişlerini tamamen desteklediği.
Niet the Dark Absol


2
Şimdi degradelerle geçişleri kullanma ile ilgili bir gösteri ekleyebilir misiniz? Cevabınıza göre çözemiyorum (ve bununla ilgili başka bir haber bulamıyorum). En son duyduğum şey, degradelerin olduğu iki arka plan görüntüsü arasında geçiş yapamazsınız.
Mackenzie McClane

98

Bir çözüm, degradenin değiştiği efekti vermek için arka plan konumunu değiştirmektir: http://sapphion.com/2011/10/css3-gradient-transition-with-background-position/

Arka plan konumlu CSS3 gradyan geçişi

CSS geçiş özelliğini kullanarak degradeleri doğrudan canlandıramasanız da, basit bir degrade animasyonu elde etmek için arka plan konumu özelliğine animasyon uygulamak mümkündür:

Bunun kodu çok basit:

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


31

Bir çözüm, degrade geçişini taklit etmek için arka plan konumunu kullanmaktır . Bu çözüm birkaç ay önce Twitter Bootstrap'ta kullanıldı.

Güncelleme

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

İşte kısa bir örnek:

Bağlantı durumu

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

Fareyle üzerine gelme durumu

.btn:hover {
   background-position: 0 0;
}

1
Yanıtınız siz düzenlemeden önce uygundu. Şimdi bir cevap değil, sadece web sitenize bir bağlantı. Cevabınızı orijinaline geri döndürüyorum.
Andrew Barber

Tamam sorun değil. Sadece küçük değişiklikler yapmak zorundasınız.
Mart'ta

2
Ve işte bunun için bir keman: jsfiddle.net/Volker_E/RksTV Anahtar, IE8'de yapamayacağınız özelliktir background-size. caniuse.com/#search=background-size Bunun dışında güzel bir çözüm.
Volker

11

Değeri için, işte bir Sass karışımı:

Kullanımı:

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

Dave Lunny'den Medium'daki bu müthiş gönderiden alınmıştır: https://medium.com/@dave_lunny/animating-css-gradients-using-only-css-d2fd7671e759


1
Medium'daki yazı çok faydalı, eklediğiniz için teşekkürler
Gendrith

9

Bunun eski bir soru olduğunu biliyorum ama birileri saf CSS'de çözüm yolumdan keyif alıyor. Degrade soldan sağa doğru kaybolur.

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


3

Aşağıda, bir tutturma etiketi bir çocuk ve bir torun içerir. Torun uzak arka plan gradyanına sahiptir. Yakın arka plandaki çocuk saydamdır, ancak geçişin gradyanı vardır. Fareyle üzerine gelindiğinde, çocuğun opaklığı 1 saniyelik bir süre boyunca 0'dan 1'e geçer.

İşte 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;
}

Ve bu HTML:

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

Yukarıdakiler yalnızca Chrome'un en son sürümünde test edilmiştir. Bunlar, fareyle üzerine gelmeden önce, fareyle üzerine gelindiğinde ve fareyle üzerine gelindiğinde tamamen geçişli görüntülerdir:

Önce Halfway Sonra


3

Degrade geçişi için kısmi geçici çözüm, iç metin kutusu gölgesini kullanmaktır - kutu gölgesinin kendisini veya arka plan rengini değiştirebilirsiniz - örneğin, arka planla aynı renkte iç metin kutusu gölgesi oluşturursanız ve arka plan renginde geçiş kullanmak yerine, yanılsama oluşturur düz arka planın radyal degradeye dönüştüğü

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

1
akıllı çözüm, gömülü gölge degrade yanılsamayı mükemmel bir şekilde yaratabilir
Aziz


2

Codepen üzerinde opacityözelliği değiştiren ancak sözde öğeleri kaldırarak bir gradyandan diğerine kaybolmayı başaran güzel bir kesmek bulundu . Yaptığı o belirlemesidir bir :afterböylece gerçek elemanın opaklığını değiştirdiğinizde, :afterbir solma sanki böylece görünüyor kadar eleman gösterilmektedir. Paylaşmanın faydalı olacağını düşündüm.

Orijinal kod kalemi: 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>


2

Sorunuzdaki css koduna dayanarak, kodu aşağıdaki gibi denedim ve benim için çalışıyor (kod snippet'ini çalıştırın) ve lütfen kendiniz deneyin:

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

Sorunuzdaki css koduna dayanarak, kodu aşağıdaki gibi denedim ve benim için çalışıyor ve lütfen kendiniz deneyin:

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

Sizin için çalışıyor mu? İhtiyacınıza göre rengi değiştirin :)


1

Kullanmayı deneyin: before and: after (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;}

1

Belirtildiği gibi. Degradeler şu anda CSS Geçişleri ile desteklenmemektedir. Ancak bazı durumlarda renklerden birini saydam olarak ayarlayarak bunun etrafında çalışabilirsiniz, böylece diğer bazı sarma öğelerinin arka plan rengi parlar ve bunun yerine geçiş yapar.


1

Bunu işte kullanıyorum :) IE6 + https://gist.github.com/GrzegorzPerko/7183390

<element class="ahover"><span>Text</span></a>Bir metin öğesi kullanıp kullanmadığınızı unutmayın .

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

0

Bunu yapmak için hala resmi bir yol olmadığından başka bir görünüm yayınlamak zarar veremez. Arka plan radyal gradyanını ve geçiş hızını tanımlayabileceğiniz hafif bir jQuery eklentisi yazdı. Bu temel kullanım daha sonra solmaya izin verir, requestAnimationFrame (çok düzgün) ile optimize edilir:

$('#element').gradientFade({

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

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

Orijinal arka planı ve tüm özellikleri olduğu gibi tutar. Ayrıca bir ayar olarak vurgu izleme özelliği vardır:

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


0

Bir div'ın 3D küre gibi görünmesini ve renkler arasında geçiş yapmasını istedim. Degrade arka plan renklerinin geçiş yapmadığını keşfettim (henüz). Bir radyal gradyan arka planı, geçiş katı bir arka plan ile elemanın önüne (z-endeksi kullanarak) yerleştirdim.

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

sonra div.ballaltında:

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

sonra div.ballve voila!

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

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.