CSS 只旋转边框
CSS Rotate only the border
我想制作三个围绕文本旋转的圆形微调器,这些微调器中的文本将保持静止。
我只能通过参考 Bootstrap 中的 .spinner-border
来使用 CSS 执行此操作。无法修改 HTML 文件。
.loader-wrapper {
position: fixed;
width: 100%;
height: 100%;
text-align: center;
z-index: 1;
}
@-webkit-keyframes spinner-border {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spinner-border {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.loader {
position: relative;
left: auto;
top: auto;
width: 80px;
font-size: 20px;
text-align: center;
display: inline-block;
width: 10rem;
height: 10rem;
vertical-align: text-center;
border: 0.25em solid currentColor;
border-right-color: transparent;
border-radius: 50%;
-webkit-animation: spinner-border .75s linear infinite;
animation: spinner-border .75s linear infinite;
}
<div class="loader-wrapper">
<div class="loader">Loading</div>
</div>
我试过先做一个微调器。但我不知道如何让文字保持静止。
.loader-wrapper {
position: fixed;
width: 100%;
height: 100%;
text-align: center;
z-index: 1;
}
@-webkit-keyframes spinner-border {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spinner-border {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.loader {
position: relative;
top: 5px;
left: auto;
width: 80px;
font-size: 20px;
text-align: center;
display: inline-block;
width: 10rem;
height: 10rem;
vertical-align: text-center;
}
.loader::after {
content: '';
position: absolute;
left: 0;
top: -10px;
width: 100%;
height: 100%;
border: 0.25em solid currentColor;
border-right-color: transparent;
border-radius: 50%;
-webkit-animation: spinner-border .75s linear infinite;
animation: spinner-border .75s linear infinite;
}
<div class="loader-wrapper">
<div class="loader">Loading</div>
</div>
我想制作三个围绕文本旋转的圆形微调器,这些微调器中的文本将保持静止。
我只能通过参考 Bootstrap 中的 .spinner-border
来使用 CSS 执行此操作。无法修改 HTML 文件。
.loader-wrapper {
position: fixed;
width: 100%;
height: 100%;
text-align: center;
z-index: 1;
}
@-webkit-keyframes spinner-border {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spinner-border {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.loader {
position: relative;
left: auto;
top: auto;
width: 80px;
font-size: 20px;
text-align: center;
display: inline-block;
width: 10rem;
height: 10rem;
vertical-align: text-center;
border: 0.25em solid currentColor;
border-right-color: transparent;
border-radius: 50%;
-webkit-animation: spinner-border .75s linear infinite;
animation: spinner-border .75s linear infinite;
}
<div class="loader-wrapper">
<div class="loader">Loading</div>
</div>
我试过先做一个微调器。但我不知道如何让文字保持静止。
.loader-wrapper {
position: fixed;
width: 100%;
height: 100%;
text-align: center;
z-index: 1;
}
@-webkit-keyframes spinner-border {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spinner-border {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.loader {
position: relative;
top: 5px;
left: auto;
width: 80px;
font-size: 20px;
text-align: center;
display: inline-block;
width: 10rem;
height: 10rem;
vertical-align: text-center;
}
.loader::after {
content: '';
position: absolute;
left: 0;
top: -10px;
width: 100%;
height: 100%;
border: 0.25em solid currentColor;
border-right-color: transparent;
border-radius: 50%;
-webkit-animation: spinner-border .75s linear infinite;
animation: spinner-border .75s linear infinite;
}
<div class="loader-wrapper">
<div class="loader">Loading</div>
</div>