Как сделать ховер круг по часовой стрелке?

Question

[lingvo838]

Есть соц сети
хочу сделать на ховере появление обводки. А конкретно чтобы она возникала с 12:00(условно) и заканчивалась в той же точке пройдя круг.

Comments

[Талян]

Не совсем вижу ваши попытки реализации (а тут принято показывать свой код, и спрашивать что конкретно у вас не получается), но могу посоветовать посмотреть гитхаб у гуру JS, юзера 0xD34F https://0xd34f.github.io/spinners/ - найдите подходящую анимацию, и переделайте под себя. Одного взгляда на код достаточно, чтобы понять как реализовать вашу идею. Я полагаю это можно сделать через keyframes.

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

Талян, там не то. Как я понял, нужна заливка а не просто вращение. Такое элементарно делается через svg path, а как сделать через css пока не придумал, приду домой может поковыряю.

[Талян]

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

появление обводки

то бишь не заливки.

А SVG я вообще не умею, и даже побаиваюсь немножечко.

[lingvo838]

Владимир Проскурин, Не совсем заливку. Хочу именно обводку сделать, которая появляется по часовой стрелке

[Евгений]

lingvo838, а border-radius: 50% плавно не анимировать? Видел несколько анимаций, вроде на чистом css только квадратная обводка появлялась...

[Rustam Bainazarov]

Евгений, он хочет иное, типа заполнение обводки по часовой стрелке. А-дя радиальная диаграмма.

По теме: я знаю только решение на SVG + JS.

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

Талян,@lingvo838 я имел ввиду заливки рамки. Согласен, неподходящий термин.

раз вы куратор тега, не смею, такой плебей, с вами спорить :)

Хмм, чтобы стать куратором, достаточно иметь 100 вклада в тег (по моим наблюдениям), и этого не достаточно, чтобы считаться специалистом. Поэтому считаю, что нужно всем указывать на из ошибки, независимо от того, какие значки висят в профиле :-)

[RAX7]

lingvo838, оно?

[Талян]

RAX7, вы бы в ответы лучше бы запостили, а не в комментарии)

[lingvo838]

RAX7, Оно)

[RAX7]

Талян, так пока поймешь что нужно)

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

Талян, что-то даже вышло. Ужасный костыль, но целью было сделать на CSS.
https://jsfiddle.net/Vlad_IT/ug6rpLd5/1/

Answer 1

[RAX7]

+ полезная статья как сделать такое и многое другое https://habr.com/ru/post/349988/

Answer 2

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

Вот вариант на числом CSS. Довольно громоздкий, и я даже сказал бы - костыльный, но зато доказывает, что многое можно сделать на css.