@Blenderik

Как сделать анимацию стрелки по кругу?

Как сделать анимацию стрелки по кругу?
  • Вопрос задан
  • 81 просмотр
Решения вопроса 1
z80b
@z80b
Frontend
Если по ховеру, то можно так:
div{
  width:100px;
  height: 50px;
  border: 2px dotted red;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  border-bottom:none;
  position:relative;
  color:red;
  transition: 3s all ease;
      transform-origin: 50% 100%;
}
div:after{
  position:absolute;
  content:'▼';
  bottom:-10px;
  right:-11px;
  transform: rotate(-38deg);
}
div:before{
  position:absolute;
  content:'▼';
  bottom:-10px;
  left:-11px;
  transform: rotate(38deg);
}
div:hover {
  transform: rotateZ(360deg)
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
ArsenyMatytsyn
@ArsenyMatytsyn Куратор тега CSS
CEO iAmStudio, предприниматель.
https://codepen.io/i-am-studio_ru/pen/OJXMrvw

Вся соль ниже стрелок, выше чтобы глаза не болели смотреть. Сам элемент рекомендую слепить из svg, дабы не городить костыли.
Ответ написан
Ваш ответ на вопрос

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

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