CSS重叠元素与

Question

Heyy！

我正在做一个加载动画，其中有一个背景元素具有灰色背景，一个前景元素是蓝色，它随着动画的移动而移动，使其更长，并且周期性更短，以使动画更有趣。

要创建圈子，我设置border-radius: 50%;。

对于蓝色圆圈，我使用clip对元素进行了一半处理，并使用了另一个与蓝色半圆“跟随”相同类型的灰色半圆，从而使蓝色圆圈的印象变得更长/更短取决于灰色半圆与蓝色半圆的距离。

我的问题是，除了（显然）background-color和transform: rotate()之外，蓝色和灰色半圆的每个方面都是相同的，灰色元素并不完全重叠蓝色圆圈，但在灰色元素的一侧有蓝色部分的痕迹。

查看图片了解更多详情：

好的，所以对于一个“微调器”，HTML看起来像这样（让我们称之为）：

<div class="loadingBackground"></div>
<div class="loadingForeground spinAnimation"></div>
<div class="loadingCover spinAnimation"></div>

spinAnimation类定义动画的名称和持续时间，对此不太感兴趣。关键帧只是0°到360°的旋转。

其他课程：

.loadingCover {
    width: 30px;
    height: 30px;
    box-sizing: border-box;
    border: solid 4px #d1d1d1;
    border-radius: 50%;
    position: absolute;
    clip: rect(0px, 15px, 30px, 0px);
    margin-top: -30px;

    -webkit-animation-delay: 400ms;
    -moz-animation-delay: 400ms;
    -ms-animation-delay: 400ms;
    animation-delay: 400ms;
}

.loadingBackground {
    width: 30px;
    height: 30px;
    box-sizing: border-box;
    border: solid 4px #d1d1d1;
    border-radius: 50%;
}

.loadingForeground {
    width: 30px;
    height: 30px;
    box-sizing: border-box;
    border: solid 4px #00aeef;
    border-radius: 50%;
    position: absolute;
    clip: rect(0px, 15px, 30px, 0px);
    margin-top: -30px;
    transform: rotate(30deg);
}