Как сделать такие контуры у блоков?

Question

[Виктория Зголич]

Подскажите, пожалуйста, как сделать такие бордеры у блоков?

По хорошему еще должна быть анимация: при попадании на этот блок, бордер так сказать прорисовывается. Это пока необязательно, но если вдруг знаете решение, буду признательна!

Помогите пожалуйста специалисту, который только возобновил работу после 3 лет декретного отпуска:)

Answer 1

[xmoonlight]

Чуть проще и понятнее: тут и тут

PS: И бонус, как всегда: тут.

Comments

[Виктория Зголич]

спасибо большое) по наставлениям предыдущего комментатора решила сама все-таки разобраться) но спасибо, что предоставили подушку безопасности )

[xmoonlight]

Виктория Зголич, Пожалуйста.
Вот "рыба-код" для keyframes animation (CSS, для on-hover):

.anim1 {
  /*..........*/
  animation: none;
}

.anim1:hover {
  animation: kf_anim1 2s infinite;
}

@keyframes kf_anim1 {
  0% {
   /*....*/
  }
  50% {
   /*....*/
  }

  /*........*/

 100% {
   /*....*/
  }
}

Answer 2

[Владимир Проскурин]

Я хотел сначала дать решение, но после последнего абзаца

Помогите пожалуйста специалисту, который только возобновил работу после 3 лет декретного отпуска:)

подумал, что вам будет очень полезно самой почитать и разобраться https://css-tricks.com/building-progress-ring-quickly/
Эта штука называется по разному - radial progress, ring, progress, cyrcle progress, просто гуглите это название с добавкой "css", найдете много материала.

Comments

[Виктория Зголич]

спасибо )

[siarheisiarhei]

за 3 года - должно больше знать... Регресс... однако... кинь сие - не - твое.....

[Владимир Проскурин]

siarheisiarhei, не три года учебы, а три года перерыва от работы

[Виктория Зголич]

siarheisiarhei, ваше мнение адресуйте кому-нибудь другому. Я в этом не нуждаюсь

[Виктория Зголич]

Владимир Проскурин, именно так) спасибо