Holo spinner示例與圖像不工作，而純粹的CSS

與此問題相關：Android Holo loading spinner in CSS我已經注意到，接受的答案的第一個例子，與圖像，不能在鉻上工作（我只看到一個靜態的灰色戒指），而它在Firefox和IE 11上工作。Holo spinner示例與圖像不工作，而純粹的CSS

即使這個問題的目的是讓一個沒有圖像的微調器，兩者都非常好，我發現第一個稍微好看（在Firefox上），以及我想使用它，但我不知道它爲什麼不能在Chrome上運行，我想知道是否有修補程序，以供將來參考（所以我知道該怎麼避免和/或如何修復它）並知道我是否必須堅持一個沒有圖像

我的Chrome版本是42.0.2311.90（32位）

來源

2015-04-24 valepu

我只是看的jsfiddle（http://jsfiddle.net/MattiasBuelens/pTvmW/），它只是正常工作。我不知道爲什麼它不適合你。我的鍍鉻版本是：42.0.2311.90（64位）。我知道有動畫與谷歌瀏覽器的CSS問題，如果你看這裏： https://productforums.google.com/forum/#!topic/chrome/w4YlFvEMQNw 我認爲這取決於你的操作系統。 – Rotan075

這就是工作jsfiddle（純粹的CSS），試試這個：http://jsfiddle.net/MattiasBuelens/T2XAx/我已經檢查了所有的例子，報告沒有在你的鏈接的討論中工作，他們都爲我工作。我正在運行Windows 7 64位ATI顯卡（在討論中看到有人說這可能是由Nvidia驅動程序引起的） – valepu

因爲我認爲兩個spinners都是正確的，我沒有意識到它缺少webkit-keyframes屬性。今天，我再次觀看了CSS，並偶然注意到css spinner擁有它，而基於圖像的Spinner沒有。添加到圖像基於CSS的微調工作

@-webkit-keyframes rotate-outer { 
    0% { 
     -webkit-transform: rotate(0deg); 
    } 
    100% { 
     -webkit-transform: rotate(1080deg); 
    } 
} 

@-webkit-keyframes rotate-inner { 
    0% { 
     -webkit-transform: rotate(720deg); 
    } 
    100% { 
     -webkit-transform: rotate(0deg); 
    } 
}

來源

2015-05-06 09:13:26 valepu

Holo spinner示例與圖像不工作，而純粹的CSS

回答

相關問題