css3只适用于谷歌

Question

这是一个JSFiddle http://jsfiddle.net/6hLf6/

这是css

#loading {
            margin: 80px auto;
            position: relative;
            width: 100px;
            height: 100px;
            -webkit-border-radius: 50px;
               -moz-border-radius: 50px;
                    border-radius: 50px;
            background: #ccc;
            font: 12px "Lucida Grande", Sans-Serif;
            text-align: center;
            line-height: 100px;
            color: white;
            -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.5);
            -moz-box-shadow: 0 0 5px rgba(0,0,0,0.5);
            box-shadow: 0 0 5px rgba(0,0,0,0.5);

        }
        #loading:before {
            content: "";
            position: absolute;
              left: -20px;
               top: -20px;
            bottom: -20px;
             right: -20px;
            -webkit-border-radius: 70px;
               -moz-border-radius: 70px;
                    border-radius: 70px;
            background: #eee;
            z-index: -2;
            -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
            -moz-box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
            box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
        }
        #loading span {
            position: absolute;
            width: 0;
            height: 0;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-top: 80px solid rgba(255,255,255,0.7);
            z-index: -1;
            top: -28px;
            left: 0px;
            -webkit-animation: ticktock 5s linear infinite;
            -webkit-transform-origin: 50px 80px;
        }
        #loading strong {
            overflow: hidden;
            display: block;
            margin: 0 auto;
            -webkit-animation: expand 2.5s linear infinite;
        }

        @-webkit-keyframes expand {
            0% {
                    width: 0;
            }
            100% {
                    width: 60px;
            }
        }

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

这是html

<div id="loading"><strong>loading...</strong><span></span></div>

结果如下：

火狐

firefox中圆圈不旋转的问题

IE11

它不是一个圆圈而且它没有旋转

只是Chrome工作正常

你可以帮忙吗？

Answer 1

Internet Explorer和Firefox使用标准扩展而不是动画的webkit扩展。您需要添加标准css以及webkit供应商扩展，这将扩展您的css：

    #loading {
    margin: 80px auto;
    position: relative;
    width: 100px;
    height: 100px;
    -webkit-border-radius: 50px;
       -moz-border-radius: 50px;
            border-radius: 50px;
    background: #ccc;
    font: 12px "Lucida Grande", Sans-Serif;
    text-align: center;
    line-height: 100px;
    color: white;
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.5);
    -moz-box-shadow: 0 0 5px rgba(0,0,0,0.5);
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
}
#loading:before {
    content: "";
    position: absolute;
      left: -20px;
       top: -20px;
    bottom: -20px;
     right: -20px;
    -webkit-border-radius: 70px;
       -moz-border-radius: 70px;
            border-radius: 70px;
    background: #eee;
    z-index: -2;
    -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
    -moz-box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
    box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
}
#loading span {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 80px solid rgba(255,255,255,0.7);
    z-index: -1;
    top: -28px;
    left: 0px;
    -webkit-animation: ticktock 5s linear infinite;
    -webkit-transform-origin: 50px 80px;
    animation: ticktock 5s linear infinite;
    transform-origin: 50px 80px;
}
#loading strong {
    overflow: hidden;
    display: block;
    margin: 0 auto;
    -webkit-animation: expand 2.5s linear infinite;
    animation: expand 2.5s linear infinite;
}

@-webkit-keyframes expand {
    0% {
            width: 0;
    }
    100% {
            width: 60px;
    }
}

@-webkit-keyframes ticktock {
    0% {
            -webkit-transform: rotate(0);
    }
    100% {
            -webkit-transform: rotate(360deg);
    }
}
        @keyframes expand {
    0% {
            width: 0;
    }
    100% {
            width: 60px;
    }
}

@keyframes ticktock {
    0% {
            transform: rotate(0);
    }
    100% {
            transform: rotate(360deg);
    }
}

JSfiddel

这应该允许你的css加载到大多数现代浏览器上。但是，根据您将吸引哪些用户，可能值得实施其他供应商扩展，例如-moz-或-o - 。

有关使用哪些扩展程序的信息，sites可以告诉您哪些浏览器版本支持哪些扩展程序。