这可能是个愚蠢的问题;我是 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);
}
}
谢谢!
最佳答案
@chriskirknielsen 的回答
添加 .loader { position:relative; } 完美运行。
关于CSS Loaders,在页面上呈现多个,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49264196/