css - 完美的 Angular 色无限旋转

Question

我正在尝试使用这个 Angular 色

֍

代替加载旋转器。

这是我到目前为止所得到的:

.spinner::after {
  animation: rotating 2s linear infinite;
  content: "֍";
  font-size: 60px;
  display: inline-block;
  font-weight: normal;
  transform-origin: 50% 50%;
}

@keyframes rotating {
  0% {
    transform: rotate(0deg) scale(1);
    color: rgba(0, 0, 0, .5);
  }
  50% {
    transform: rotate(180deg) scale(.8);
    color: rgba(0, 0, 0, .85);
  }
  100% {
    transform: rotate(360deg);
    color: rgba(0, 0, 0, .5);
  }
}

<i class="spinner"></i>

尽管这有效，但它并不完美，因为旋转目前并未围绕 Angular 色的完美中心发生

transform-origin: 50% 50%;

让它看起来不那么出色。

有什么想法可以解决这个问题吗？

Answer 1

我会使用等于font-size的固定高度，然后使用line-height直到我得到正确的结果。也无需设置 transform-origin 因为默认情况下它设置为 center

.spinner::after {
  content: "֍";
  font-size: 60px;
  font-weight: normal;
  line-height: 0.8;
  display: inline-block;
  height: 60px;
  animation: rotating 2s linear infinite;
}

@keyframes rotating {
  0% {
    transform: rotate(0deg) scale(1);
    color: rgba(0, 0, 0, .5);
  }
  50% {
    transform: rotate(180deg) scale(.8);
    color: rgba(0, 0, 0, .85);
  }
  100% {
    transform: rotate(360deg);
    color: rgba(0, 0, 0, .5);
  }
}

<i class="spinner"></i>