我想讓三個(gè)圓形旋轉(zhuǎn)器圍繞文本旋轉(zhuǎn)，并且這些旋轉(zhuǎn)器內(nèi)的文本將保持靜止。我只能通過(guò)參考.spinner-borderBootstrap 中的 CSS 來(lái)做到這一點(diǎn)。HTML 文件無(wú)法修改。.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>我嘗試先制作一個(gè)旋轉(zhuǎn)器。但我不知道如何讓文字保持靜止。
1 回答
紫衣仙女
TA貢獻(xiàn)1839條經(jīng)驗(yàn) 獲得超15個(gè)贊
.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>
- 1 回答
- 0 關(guān)注
- 162 瀏覽
添加回答
舉報(bào)
0/150
提交
取消