Html 为什么跨度没有出现？

这是一个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>

正在加载…

问题是这是结果

工作正常，圆圈正在旋转

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

在添加不相关的css之前：

添加不相关的css后：

我忘了告诉您html中的span发生了错误 编辑 当我将加载跨度的z改为1，将#load:before的z改为0时，我得到了这个结果

---

我重新构造了加载div，使其更有意义，更易于理解

加载…

你可以在小提琴上检查css。旋转跨度可能需要更多的调整以使其居中，但你知道了

更新小提琴：

---

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

这只是一个安排问题

---

您的

字段集

标记位于动画上方。尝试将

字段集

设置为

z-index:-1
 那么，在不相关的css中有什么呢？它一定在某种程度上是相关的，因为它会影响你的圆圈，这是因为你首先
字段集
元素位于移动圆圈的顶部…这很容易通过浏览器的检查器工具找到。@Huang是的，但我试图找出是什么使它相关，但我无法，这就是我问的原因here@CBroe我不知道，但我试图通过f12对其进行调试，
加载
部分太宽，因此上面没有任何内容
字段集
在其上方–如果您不相信，请删除其白色背景色。您给我的jfiddle没有“无关”css（相关），当两个css在一起时会出现问题，但是，我会在我的机器中尝试您的代码并更新。当我将您的代码添加到以前的css中时，您的代码有一个大问题，圆圈出现了，但是旋转圆环在不同的位置旋转，它在这个位置不工作way@MarcoDinatsoli只需添加
position:relative至加载分区并使跨度居中。在更新的回答中看到我的第二把小提琴请检查一下你的新小提琴，圆圈旋转的很奇怪（对不起，我的英语不好描述它）请看10秒钟，你会看到的notice@MarcoDinatsoli正如我前面提到的，您需要将其居中
<div id="loading">
    <span></span>
    <div class="inner"><strong>loading...</strong></div>
</div>