Я открыл Иллюстратор, и без каких-либо заморочек, нарисовал в нем человечка.
chel
Рисунок на уровне дошкольника, ну да и ладно 😉
Экспортировал в SVG отдельно туловище с головой, и отдельно левую руку. То есть, у меня получилось два SVG файла.
Оба элемента я прописал непосредственно в HTML. Каждому элементу присвоил свой ID («chubrik» для туловища, и «ruka» для руки). Для того, чтобы рука не находилась где-то под туловищем, необходимо обозначить позицию для обоих элементов:

svg {
position: absolute;
}

Далее, я указал, где же у руки та самая точка, во круг которой будет происходить вращение:

#ruka{
  transform-origin: left left;
}

Объявил правило, по которому будут происходить метаморфозы:

@keyframes move {
  0% { transform: rotate(-3deg) ; }
  25% { transform: rotate(0deg) ; }
  50% { transform: rotate(3deg) ; }
  75% { transform: rotate(0deg) ; }
  100% { transform: rotate(-3deg) ; }
  }

И вызвал это правило для нашей руки, указав характер и длительность анимации:

#ruka{
  transform-origin: left left;
  animation: move 1.5s linear infinite;
}

Итог:

See the Pen hello by kapu (@kapu) on CodePen.0


Добавить комментарий