全纯CSS的Holo spinner示例不起作用

问题描述

与此问题相关：我有注意到接受的答案的第一个例子 - 带图像的例子，在Chrome和Firefox 11上运行时，Chrome浏览器无法正常工作（我只是看到了一个静态的灰色圆环）。

我的浏览器版本为42.0.2311.90（32位）

解决方案

因为我认为两个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）; 
} 
} 
  

Related to this question: Android Holo loading spinner in CSS I have noticed that the accepted answer's first example, the one with images, doesn't work on chrome (i just see a static grey ring) while it works on Firefox and IE 11.

Even though the purpose of the question was to make a spinner without images and both are very nice I find the first one slightly better looking (on firefox, that is) and i'd like to use it but I don't know why it doesn't work on chrome and I want to know if there's a fix, both for future references (so i know what to avoid and/or how to fix it) and to know if I must stick to the one without images

My Chrome version is 42.0.2311.90 (32-bit)

解决方案

Since i assumed both spinners were correct i didn't realize it was missing the webkit-keyframes property. Today i watched once again the css and noticed by chance that the css spinner had it while the image-based spinner didn't. Adding this to the image based spinner css worked

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

这篇关于全纯CSS的Holo spinner示例不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！