對漸變過渡的Webkit支持

我想知道是否有人知道webkit何時會支持漸變過渡？
例如，在瀏覽器6將以下代碼不工作（假設爲研究所過渡是一個鏈接）：對漸變過渡的Webkit支持

.grad-transition { 
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(white), to(black)); 
    -webkit-transition: background-image .5s; 
} 
.grad-transition:hover { 
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(black), to(white)); 
}

來源

2010-09-24 GZaidman

我一直在努力做這一切上午，無法雖然找到一個解決方案。 – 2010-09-25 05:45:41

相關的webkit票據，供將來參考：https：//bugs.webkit.org/show_bug.cgi？id = 21725 – Agos 2011-04-20 13:19:22

試圖做同樣的事情。

截至目前，我認爲不可能爲漸變設置動畫。

我正在使用解決方法。我沒有使用漸變動畫，而是使用背景圖像的半透明漸變，然後爲背景顏色製作動畫。

#button 
{ 
    background-color: #dbdbdb; 
    background-image: -webkit-gradient(linear, left top, left bottom, 
    color-stop(0%, rgba(255, 255, 255, 0.9)), 
    color-stop(100%, rgba(0, 0, 0, 0.6)) 
    ); 
} 

#button:hover 
{ 
    background-color: #353535; 
}

我也提出了一些例子在這裏：http://tylergaw.com/www/lab/css-gradient-transition-sorta/

來源

2011-01-04 21:05:01 thegaw

哈，這實際上有點兒聰明。謝謝:) – Nahuel 2012-05-23 20:04:22

仍然不工作從今天（鉻21/ff 14） – 2012-08-29 15:55:36

看起來它仍然不能在鉻59/FF 54工作。IE 11可以輕鬆地處理它。 – Cheslab 2017-07-14 22:08:11

它有可能使在梯度的過渡使用一個小黑客：

下面的代碼將設置transparancy 0.3上最深的顏色。懸停將設置這種顏色爲另一種顏色。由於透明度可以轉換，它會產生相同的效果。

我還爲mozilla和IE添加了非過渡版本。

.menu li a { 
    background-color: #ffffff; 
    background: -webkit-gradient(linear, left top, right top, from(#eeeeee), to(rgba(238, 238, 238,0.3))); 

    background: linear-gradient(left,#eeeeee, #ffffff); 
    background: -moz-linear-gradient(180deg, #eeeeee, #ffffff); 
} 

.menu li a:hover { 
    background-color: #006613; 
    -webkit-transition-property: background-color, color; 
    -webkit-transition-duration: 0.3s; 
    -webkit-transition-timing-function: linear; 

    background: linear-gradient(left, #006613, #eeeeee); 
    background: -moz-linear-gradient(180deg, #006613, #eeeeee); 
}

來源

2011-09-05 14:56:06

我之前問過這個問題，你可以通過搜索我所提出的問題來查看答案。他們告訴我，你還不能做到這一點，但你可以通過在兩個不同的div上設置漸變，然後在另一個div上淡出一個div來創建效果。

來源

2011-10-16 05:30:34

您也可以使用background-position給予錯覺梯度變化，當實際上它只是被移動：這使得梯度可能過渡 http://sapphion.com/2011/10/css3-gradient-transition-with-background-position/

來源

2011-10-25 07:44:30 Alan

這是Twitter的Bootstrap在按鈕上懸停時使用的內容：http://twitter.github.com/bootstrap/ – dave1010 2012-01-19 12:54:40

我工作的JS LIB ：它已經可以用於線性漸變。用法：

var button = $('#button'); 
    var targetGradientString = 'linear-gradient(rgb(247, 91, 52) 0%, rgb(240, 233, 93) 25%, rgb(43, 245, 12) 50%, rgb(24, 85, 240) 75%, rgb(166, 39, 230) 100%)'; 
    var targetElement = $('#target'); 

    button.click(function() { 
     targetElement.gradientTransition(targetGradientString, 1500, 60); 
    });

github Demo

來源

2017-03-31 18:22:47

對漸變過渡的Webkit支持

回答

相關問題