簡單的 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);
  }
}