Question

这可能是一个愚蠢的问题;我是CSS的新手，任何帮助都会非常感激。

我在这里找到了一个不错的CSS加载器https://codepen.io/tstoik/pen/Ywgxqb

它工作得非常好，除了看起来我每页只能渲染一个加载器（或者更确切地说，如果我有多个加载器，它们会在彼此之上渲染）。如何重构CSS以便在页面上有多个加载器？

例如：

<div class="loader"></div>
<div>
    ...some content
</div>
<div class="loader"></div>

上面的示例将两个加载器呈现在彼此之上（我相信），使得它看起来真的只有一个。

.loader:before, .loader:after {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  border-style: solid;
  border-top-color: #ECD078;
  border-right-color: #C02942;
  border-bottom-color: #542437;
  border-left-color: #53777A;
  content: '';
  transform: translate(-50%, -50%);
  animation: rotate 1.5s  infinite ease-in-out;
}
.loader:before {
  border-width: 5vh;
}
.loader:after {
  width: 15vh;
  height: 15vh;
  border-width: 1vh;
  animation-direction: reverse;
}

@keyframes rotate {
  0% {
    transform: translate(-50%, -50%) rotate(0);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

谢谢！

Answer 1

来自@chriskirknielsen的回答

添加.loader {position：relative;完美地运作。

CSS加载器，在页面上呈现多个

1 个答案: