Идеальное бесконечное вращение для символа ֍

Question

Я пытаюсь использовать этот символ

֍

вместо загрузочного счетчика.

Вот что я получил до сих пор:

.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>

Несмотря на то, что это работает, оно не идеально, потому что вращение в настоящее время не происходит вокруг идеального центра персонажа, несмотря на

transform-origin: 50% 50%;

делает его менее звездным.

Есть идеи, как это исправить?

Answer 1

Вы не получите идеальный центр при вращении прямоугольной формы, но вы получите идеальный центр, если его квадратная форма

см. Демонстрацию ниже

div {
    display: inline-block;
    width: 100px;
    height: 100px;
    background-color: brown;
    text-align: center;
    position: relative;
    margin: 10px;
    float: left;
}

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

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


div > i:before {
    content: '';
    width: 5px;
    height: 5px;
    background-color: #000;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.spinner1::after{
    animation: rotating 5s linear infinite;
    content: "֍";
    font-size: 60px;
    line-height: 60px;
    display: inline-block;
    font-weight: normal;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -30px;
    margin-left: -22px;
}


.spinner2::after {
    animation: rotating 5s linear infinite;
    content: "֍";
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    font-size: 60px;
    transform: rotate(90deg);
    margin-left: 2px;
}


.spinner3::after {
    animation: rotating 5s linear infinite;
    content: "";
    height: 30px;
    width: 30px;
    font-size: 60px;
    line-height: 1;
    display: inline-block;
    font-weight: normal;
    border: 1px solid #000;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -15px;
    margin-left: -15px;
}

<div>
  <i class="spinner1"></i>
</div>
<div>
  <i class="spinner2"></i>
</div>
<div>
  <i class="spinner3"></i>
</div>

если вы все еще хотите повернуть прямоугольную форму / иконку, то наряду с вращением вам нужно немного отрегулировать ее положение

надеюсь, что вы получили мойукажите здесь

Answer 2

это происходит потому, что высота и ширина символа не равны ...

Я пытался увеличить высоту, пока он не сделает то, что вы хотите ..

и вот результат:

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

@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>

Answer 3

Три свойства

line-height: 3; 
transform-origin: 50% 54%; 
text-align: center; 

Демо

.spinner::after {
  animation: spin 2s infinite linear;
  content: "֍";
  font-size: 5em;
  display: inline-block;
  font-weight: normal;
  /* Required */
  line-height: 3;
  /* Required */
  transform-origin: 50% 54%;
  /* Required */
  text-align: center;
  /* Optional for Position */
  position: relative;
  width: 3em;
  top: 0;
}

@keyframes spin {
  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>

Answer 4

Я бы использовал фиксированную высоту, равную font-size, затем играл бы с line-height, пока не получу правильное определение.Также нет необходимости устанавливать transform-origin, так как по умолчанию он установлен по центру

.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>