我想在 CSS 中自定義一個漂亮的微調器來指示加載，它作業得很好，在除 Mozilla 之外的所有地方看起來都很棒。任何人都可以向我解釋為什么以及如何解決它嗎？或者至少給我指出正確的方向。
<style>
.loader {
display: inline-flex;
width: 0.75em;
height: 0.75em;
border-radius: 50%;
outline: none;
position: relative;
animation: rotate 1s linear infinite
}
.loader::before {
content: "";
box-sizing: border-box;
position: absolute;
inset: 0px;
border-radius: 50%;
border: 0.15em solid;
animation: prixClipFix 1.8s linear infinite;
}
:is(h1, h2, h3, h4, h5) .loader::before {
border-width: 0.1em;
}
@keyframes rotate {
100% {
transform: rotate(360deg)
}
}
@keyframes prixClipFix {
0% {
clip-path: polygon(50% 50%, 0 0, 10% 0, 10% 0, 10% 0, 10% 0)
}
25% {
clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)
}
50% {
clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)
}
75% {
clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)
}
100% {
clip-path: polygon(50% 50%, 0 0, 10% 0, 10% 0, 10% 0, 10% 0)
}
}
</style>
<div>
<!-- <div ></div> -->
<h1>Loading
<div class="loader"></div>
</h1>
<h2>Loading
<div class="loader"></div>
</h2>
<h3>Loading
<div class="loader"></div>
</h3>
<h4>Loading
<div class="loader"></div>
</h4>
<h5>Loading
<div class="loader"></div>
</h5>
Loading
<div class="loader"></div>
</div>研究它，我發現 FF 不欣賞 div 在多邊形增長和收縮時旋轉。關閉任何一個都可以解決問題，但我希望它同時執行這兩個操作。
uj5u.com熱心網友回復：
感謝 Miriam，它現在已修復！我將border-radius: 0.01px;and添加overflow: hidden;到.loader父類。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/537776.html
上一篇：Firefox和Chrome之間針對HTMLCanvasfillRect操作和fontBoundingBoxAscent的行為差異