为什么没有出现跨度？

Question

这是一个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;
        -moz-animation: ticktock 5s linear infinite;
        animation:ticktock 5s linear infinite;
        -webkit-transform-origin: 50px 80px;
        -moz-transform-origin: 50px 80px;
        transform-origin:50px 80px;
    }
    #loading strong {
        overflow: hidden;
        display: block;
        margin: 0 auto;
        -webkit-animation: expand 2.5s linear infinite;
        -moz-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);
                -ms-transform: rotate(0);
                 transform: rotate(0);
                -moz-transform: rotate(0);
        }
        100% {
                -webkit-transform: rotate(360deg);
                -ms-transform: rotate(360deg);
                 transform: rotate(360deg);
                -moz-transform: rotate(360deg);
        }
    }

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

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



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


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

这是html

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

这是结果的问题 http://jsfiddle.net/jtrax/

工作正常且圆圈正在旋转

但是当我添加一个完全独立的css时，圆圈消失了，这是一个jfiddle，添加了与圆圈无关的css

http://jsfiddle.net/HSJ3j/

在添加无关的css之前：

添加无关的css后：

我忘了告诉你，在html

的范围内发生了错误

修改

当我将加载范围的z更改为1和#loading的z：之前为0时，我得到了这个结果

Answer 1

我重新构建了你的加载div，因此它更有意义，更容易理解

http://jsfiddle.net/jtrax/1/

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

你可以检查小提琴中的css。旋转跨度可能需要更多调整才能使其居中，但您可以获得想法

更新小提琴：

http://jsfiddle.net/HSJ3j/3/

如果查看堆叠顺序，加载文本应该是最高的，然后是灰色的小圆圈，然后是旋转跨度，最后是外部更大的圆圈。根据这个构建你的div，这会让事情变得更容易

Answer 2

这只是一个安排问题。

您的fieldset标记在动画上。尝试安排fieldset使用z-index:-1;设置样式。