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

Question

我一直在尝试创建一个简单的 css 微调器，它在我的页面加载时通过使用一个伪元素覆盖一个 div 来显示，其中将显示内容。 它使用border-radius和transform: rotate()来实现这个效果，但是你可以看到它在旋转时奇怪地摆动。 效果或多或少取决于屏幕大小、缩放级别和浏览器。 我发现它在 MS Edge 中最为明显。

示例小提琴

 .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

边界半径有一些奇怪的切割将其更改为边界半径：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);
  }
}