֍字符的完美无限旋转

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

我将使用等于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>

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

旋转矩形时，您将不会获得完美的中心，但是如果矩形，您将获得完美的中心。

请参阅下面的演示

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>

如果您仍要旋转矩形/图标，则必须旋转一下它的位置

希望你明白我的意思