Как оживить границу?

Question

Я хочу создать круговую границу, как видно во втором состоянии этого объекта.Так что значок загрузки.Как бы я сделал это с помощью JavaScript?

Я не ищу человека, пишущего полный код, но хотел бы узнать, какие селекторы и т. Д. Исследовать.

Answer 1

Это довольно просто.По сути, вы начинаете с круга определенной ширины и высоты, с полным радиусом границы и переходом к нему.Затем при наведении, например, вы увеличиваете ширину этого круга.Это плавно превратит этот круг в прямоугольник.Если вам не удается заставить его работать, я создам несколько примеров для вас.

Взгляните на это (наведите курсор на круг)

div {
  width: 50px;
  height: 50px;
  border: 3px solid green;
  border-radius: 30px;
  margin:0 auto;
  transition: .5s;
}

div:hover{
  width: 200px;
  background-color: green;
}

<div></div>

Здесь вы можете изменить его в соответствии со своими потребностями.