Question

我一直在尝试创建一个简单的css微调器，它在我的页面加载时显示，使用覆盖div的伪元素来显示内容。它使用border-radius和transform: rotate()来实现此效果，但正如您可以看到它在旋转时奇怪地摇摆。根据屏幕大小，缩放级别和浏览器，效果或多或少都很明显。我发现它在MS Edge中最为明显。

Example fiddle

＆＃13;

.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); }
}

＆＃13;

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

＆＃13;

Answer 1

边界半径有一些奇怪的切割将其更改为border-radius：1000px，看看会发生什么

Answer 2

将宽度和高度更改为像素值似乎可以解决问题。它可能不是最好的解决方案，但嘿，它有效。

要使其适用于所有屏幕尺寸，您需要使用@media。在css的底部，我添加了一个如果屏幕尺寸小于700px则改变尺寸只是为了告诉你如何做，如果你想改变周围的数字或者什么，你至少知道如何@media可以用：）

以下是根据用户设备的屏幕大小更改大小的代码。

@media (max-width: 700px){
  .loading::after {
    width: 100px;
    height: 100px;
  }
}

如果你想在大屏幕上使它不同，只需将“max-width：700px”替换为“min-width：1500px”或你选择的值：）

http://jsfiddle.net/hfsqebsn/5/

同样，可能有更好的方法，但这有效：）

编辑：我想我可能已经改变了我为测试目的链接的小提琴中的其他东西，所以请注意：P

Answer 3

这个问题让我整天发疯。我能够通过使环比预期更厚，然后遮盖其内部和外部以隐藏观看者的摆动来亲自解决它。

解决方案。 https://codepen.io/corbinmosher/pen/GRWmYjy

带有背景颜色的解决方案以帮助理解它。 https://codepen.io/corbinmosher/pen/bGqWmEj

<div class="spinner__container">
  <div class="spinner__ring"></div>
  <div class="spinner__outline"></div>
</div>

.spinner__container {
  position: relative;
  width: 58px;
  height: 58px;
  
  background-color: white;
}

.spinner__ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: calc(100% - 8px);
  height: calc(100% - 8px);
  border-radius: 50%;
}

.spinner__ring:before {
  position: absolute;
  top: -1px;
  left: -1px;

  width: calc(100% + 2px);
  height: calc(100% + 2px);

  border: 10px solid lightblue;
  border-top: 10px solid blue;
  box-sizing: border-box;
  content: '';
  border-radius: 50%;
  animation: rotate-spinner 1s linear infinite;
}

.spinner__ring:after {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: calc(100% - 8px);
  height: calc(100% - 8px);

  box-sizing: border-box;
  content: '';
  border-radius: 50%;

  background-color: white;
}

.spinner__outline {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: calc(100% - 8px);
  height: calc(100% - 8px);
  border-radius: 50%;
  border: solid 2px white;
}

@keyframes rotate-spinner {
  0% {
    transform: rotate(405deg);
  }
  100% {
    transform: rotate(765deg);
  }
}

@-webkit-keyframes rotate-spinner {
  0% {
    transform: rotate(405deg);
  }
  100% {
    transform: rotate(765deg);
  }
}

简单的CSS微调器元素在旋转时摆动

3 个答案: