html - 简单的 CSS 旋转器元素在旋转时摇摆不定

Question

我一直在尝试创建一个简单的 css 微调器，它在我的页面加载时显示，方法是使用一个伪元素覆盖将显示内容的 div。它使用 border-radius 和 transform: rotate() 来实现这种效果，但正如您所见，它在旋转时会奇怪地摇晃。效果或多或少取决于屏幕大小、缩放级别和浏览器。我发现它在 MS Edge 中最为明显。

Example fiddle

.loading {
  width: 75vh;
  height: 100vh;
  margin: auto;
  background: white;
  position: relative;
}

.loading::after {
    border: 6vmin solid lightblue;
    border-top: 6vmin solid darkblue;
    position: absolute;
    margin-top: 5vmin;
    margin-left: 5vmin;
    width: 15vmin;
    height: 15vmin;
    content: "";
    border-radius: 50%;
    animation: spin .5s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

<div class="loading"></div>

Answer 1

border-radius 发生了一些奇怪的切割将其更改为 border-radius: 1000px，看看会发生什么