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

Я пытаюсь использовать этого персонажа

֍

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

Вот что у меня есть:

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

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

Любые идеи, как это исправить?

css css-animations

13.02.2019 13:30

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

375

Ответы 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>

Почему вы перемещаете анимацию в основной элемент, а не применяете ее к ::after?

— 13.02.2019 13:38

@connexo хм .. не знаю :) должно быть то же самое. (отредактировано)

— 13.02.2019 13:41

13.02.2019 13:35

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

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

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

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

13.02.2019 13:52

Три свойства

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>

13.02.2019 14:31

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

см. демо ниже

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>

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

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

13.02.2019 15:22

Другие вопросы по теме

CSS одна обычная анимация одна зацикленная анимация НЕТ JS

2 разные анимации в зависимости от направления прокрутки

Vue slideToggle не плавный

Как установить ключевые кадры 50% с помощью jquery (или javascript)?

Есть ли способ запускать несколько анимаций CSS одновременно при наведении курсора?

Перевернуть несколько изображений одно за другим после некоторой задержки

CSS-анимация работает иначе, если свойства указаны отдельно

Почему изображения не меняются с помощью CSS img:nth-of-type

Как сделать так, чтобы анимация распространялась от центра?

Как анимировать линейный градиент сверху слева вниз справа?

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

֍

Ответы 4

Три свойства

Демо

Другие вопросы по теме

Похожие вопросы