CSS3漸變閃爍

我在玩CSS3漸變，並試圖在mouseover中移動它。正如你可以從jsFiddle看到的，CSS梯度出現在:hover;然而，它似乎閃爍了幾次。CSS3漸變閃爍

僅供參考，迄今爲止，這已通過Chrome v30/Firefox v24/Safari v5.1測試。

另外，兩個都已成爲工作解決方案，但結合起來，我得到了閃爍的效果。

nav li { 
    width: 90px; 
    padding-right: 15px; 
    padding-left: 15px; 
    height: 30px; 
    border: 1px solid #000; 
    float: left; 
    list-style-type: none; 

    background-position: -200px -200px; 
    -webkit-transition: background 1s ease-out; 
    -moz-transition: background 1s ease-out; 
    -o-transition: background 1s ease-out; 
    transition: background 1s ease-out; 
} 

nav li:hover { 
    background-position: 200px 0; 
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjIiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzYwNjA2MCIgc3RvcC1vcGFjaXR5PSIwLjIiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==); 
    background: -moz-linear-gradient(top, rgba(255,255,255,0.2) 0%, rgba(96,96,96,0.2) 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.2)), color-stop(100%,rgba(96,96,96,0.2))); 
    background: -webkit-linear-gradient(top, rgba(255,255,255,0.2) 0%,rgba(96,96,96,0.2) 100%); 
    background: -o-linear-gradient(top, rgba(255,255,255,0.2) 0%,rgba(96,96,96,0.2) 100%); 
    background: -ms-linear-gradient(top, rgba(255,255,255,0.2) 0%,rgba(96,96,96,0.2) 100%); 
    background: linear-gradient(to bottom, rgba(255,255,255,0.2) 0%,rgba(96,96,96,0.2) 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#33ffffff', endColorstr='#33606060',GradientType=0); 
}

我試着限制使用animation-iteration-count動畫，但我已經想通了，這似乎只與動畫和@keyframes工作。我還讀過幾個不同的網站，其中 @keyframes還不支持CSS漸變動畫。

來源

2013-10-27 davewoodhall

一種很酷的效果。如果你想要的話，這將是很難得到的！ –

是的，這確實很整齊。但是，這不是我們正在尋找的。我想這是一個快樂的事故。不過，我希望能夠在不使用jQuery的情況下正常工作。 – davewoodhall

@ConorPender正如你從Spudley發佈的anwser中看到的那樣，效果來自偏移值，這會產生閃爍的效果。因此，如果這是一個理想的效果，它很容易獲得。希望這能給你未來的想法！ – davewoodhall

的閃爍效果是由於你的元素高度（30px）之間的差異的背景是不可見的，你已經偏移給出背景（-200px - >0px）。

基本上，它在一秒鐘的過渡時間內滾動瀏覽六次（因爲30次會進入200次六次），這就是給你閃爍的效果。如果你稍微增加轉換時間，比如5秒，你可以更容易地看到效果;這會讓它更明顯地發生。（很明顯，你可以將其設置回當你做測試）

如果更改inital background-position到-30px，而不是-200px，你會得到它滾動到視圖只是一次，因而沒有閃爍。

希望有所幫助。

來源

2013-10-30 14:12:42 Spudley

該死的我剛剛錯過了答案，遲了3分鐘：D –

看，我覺得這不會是一個問題，因爲我在一個響應式設計中工作，元素永遠不會超過200像素。你的建議完美無缺，但我有我的背景顯示我是否使用百分比（-100％） - 是否正常？ – davewoodhall

是的 - 背景有些棘手，因爲'X％'意味着圖像頂部的'X％'線與通過元素'X％'的線相同。這意味着'0％'對應於「頂部與頂部對齊」，'50％'表示「中間與中間對齊」，'100％'表示「底部與底部對齊」，並且其他所有內容都介於兩者之間。在這種情況下，因爲背景圖像與元素的大小相同（這就是梯度的工作方式，除非明確定義）否則，使用的百分比無關緊要，您將始終獲得相同的位置。 –

問題是後臺重複。你必須將其設置爲不重複，使前懸停

background-repeat: no-repeat;

JSFiddle

來源

2013-10-30 14:12:20 LostInComputer

正如在其他答案中提到的，問題是background-repeat和您的非常大的背景位置。

Here是我相信你試圖實現的更新小提琴。

請注意，我已經刪除了所有的冗餘CSS規則 - 所有主流瀏覽器都支持gradients和transitons無前綴，使所有那些沒用的前綴（還應該指出的是，-ms-transition和-ms-linear-gradient從來沒有存在過，因爲IE沒」跳過槍...你知道有至少三種不同的方式來定義在Chrome瀏覽器中的梯度？）

除了清理，我將後臺定義移動到元素的樣式（而不是它的懸停樣式）以確保「過渡出來」是可能的，否則它只會變成空白。我申請了background-repeat:repeat-x只允許水平重複，並調整background-position，以便在初始狀態下梯度幾乎完全離開底部，並且懸停狀態處於正確的位置。這產生了一個平滑而準確的過渡。

希望這會有所幫助！

來源

2013-10-30 14:21:05

由於IE11很新，很多用戶還沒有升級到這個版本。事實上，我的目標受衆確實需要較老的版本支持（仍然有近20％使用IE8或9），所以我仍然使用由Colorzilla生成的腳本（http://www.colorzilla.com/gradient-editor/）。 – davewoodhall

我的小提琴在IE10中工作正常。使用比這更老的任何人都故意忽略Windows Update，那麼爲什麼要浪費時間呢？此外，如果他們沒有獲得幻想的漸變，它不是世界末日。 –

只是爲了迂迴，'-ms-'前綴*確實存在，但僅限於IE10預覽版本。因此，對於所有意圖和目的而言，你是對的，他們不是必需的，但是說他們從來不存在是不準確的。 – Spudley

回答

相關問題