Alizoda
@Alizoda
WEB DESIGNER

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

Нужно сделать, чтобы логотип крутился как монета (анимация).

Заранее спасибо.

5b728aff14b60526873102.jpeg
  • Вопрос задан
  • 1990 просмотров
Решения вопроса 1
Пригласить эксперта
Ответы на вопрос 2
ixon
@ixon

https://codepen.io/anon/pen/XBQgKa
Используя css3 анимацию добавим к логотипу ссылку на анимацию coin, установим итерацию в 5 секунд и бесконечное повторение:
animation:coin 5s infinite;

.coin{
  display:block;
  background:url('https://2ch.hk/b/arch/2018-05-23/src/176403732/15270649403080.jpg');
  background-size: 100% 100%;
  width:120px;
  height:120px;
  border-radius:50%;
  animation:coin 5s infinite;
}

Добавим анимацию coin, изменив ширину до 0, затем вернём её в изначальное положение.
И сделаем отступ, чтобы анимация происходила относительно центра монеты.
@keyframes coin {
    0%   {
      width: 120px;
      margin-left:0px;
    }
    50%  {
      width: 0px;
      margin-left:60px;
    }
    100% {
      width: 120px;
      margin-left:0px;
    }
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы