Question

我一直在使用加载/进度微调器，它有五个不同的四分之一圆，它们全部位于absolute的上方。唯一可见的部分是边框，旋转div，边框看起来像是在“填充”。

第一个旋转的四分之一与背景颜色相同，基本上隐藏了边框直到旋转了四分之一。

这几乎可以完美地工作，除了底层边框的边缘溢出：

#container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
}

#loader-container {
  position: relative;
  padding: 10px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #1e262e;
}

.loader {
  pointer-events: none;
  position: absolute;
  width: 100px;
  height: 100px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
  border-radius: 50%;
  box-sizing: border-box;
  transform: rotate(45deg);
}

.loader.hide {
  border-color: #1e262e transparent transparent transparent;
  animation: rotate-hide 0.75s linear forwards;
}

.loader:nth-of-type(2) {
  animation: rotate-one 0.75s 0.75s linear forwards;
}
.loader:nth-of-type(3) {
  animation: rotate-two 0.75s 1.5s linear forwards;
}
.loader:nth-of-type(4) {
  animation: rotate-three 0.75s 2.25s linear forwards;
}

@keyframes rotate-hide {
  from {
    transform: rotate(45deg);
  }
  to {
    transform: rotate(135deg);
    visibility: hidden;
  }
}

@keyframes rotate-one {
  from {
    transform: rotate(45deg);
  }
  to {
    transform: rotate(135deg);
  }
}

@keyframes rotate-two {
  from {
    visibility: hidden;
    transform: rotate(135deg);
  }
  to {
    transform: rotate(225deg);
  }
}

@keyframes rotate-three {
  from {
    visibility: hidden;
    transform: rotate(225deg);
  }
  to {
    transform: rotate(315deg);
  }
}

<div id="container">
  <div id="loader-container">
    <div class="loader"></div>
    <div class="loader"></div>
    <div class="loader"></div>
    <div class="loader"></div>
    <div class="loader hide"></div>
  </div>
</div>

有什么办法可以解决此问题而又不增加宽度，高度，边距或边框宽度？

隐藏边框的溢出边缘

0 个答案: