本文介绍了全纯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示例不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

10-14 20:48