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 告诉您哪些浏览器版本支持哪些扩展。