Bymas | Анимация border

У кого есть код анимации div? Тоесть образно есть картинка 50х50, анимация происходит по часовой стрелке, а именно border

БЕЛАЗ , у меня есть

Такое реализовать не сложно

TRIKKI (8 апр 2023, в 10:33)
Такое реализовать не сложно

Искал в гугле, не те анимашки. А взять от куда то хз

https://freefrontend.com/css-border-animations/

788058362 [!] (8 апр 2023, в 10:27)

БЕЛАЗ , у меня есть

Ну кинь код гляну... или балабол?

БЕЛАЗ [!] (8 апр 2023, в 10:11)
У кого есть код анимации div? Тоесть образно есть картинка 50х50, анимация происходит по часовой стрелке, а именно border

Немного не понятно сформулирован вопрос, тебе нужно чтобы картинка была анимирована и вращалась по часовой стрелки, в виде границ div? Или просто чтобы границы были анимированы условным градиентом (Пост #5)?

DELETED (8 апр 2023, в 12:34)
Немного не понятно сформулирован вопрос, тебе нужно чтобы картинка была анимирована и вращалась по часовой стрелки, в виде границ div? Или просто чтобы границы были анимированы условным градиентом (Пост #5)?

Граница картинки

БЕЛАЗ , Типо так что-ли?

css

   Пример  * {   padding: 0;   margin: 0;   box-sizing: border-box; }  .circle {   position: relative;   width: 200px;   height: 200px;   background: #ccc;   border-radius: 100%; }  .circle__item {   width: 50%;   height: 100%;   right: 0px;   position: absolute;   overflow: hidden;   transform-origin: left center; }  .circle:hover .circle__item {   animation: anim1 6s 1;   transform: rotate(180deg); }  @keyframes anim1 {   0% {     transform: rotate(0deg);   }   50% {     transform: rotate(0deg);   }   50.01% {     transform: rotate(180deg);   }   100% {     transform: rotate(180deg);   } }  .circle__half {   height: 100%;   right: 0px;   position: absolute;   border: solid 10px transparent;   border-top-color: green;   border-left-color: green;   border-radius: 50%; }  .circle__half--clipped {   width: 200%;   transform: rotate(-45deg); }  .circle:hover .circle__half--clipped {   transform: rotate(135deg);   animation: anim2 3s linear 2; }  @keyframes anim2 {   0% {     transform: rotate(-45deg);   }   100% {     transform: rotate(135deg);   } }  .circle__half--fix {   width: 100%;   transform: rotate(135deg);   opacity: 0; }  .circle:hover .circle__half--fix {   opacity: 1;   animation: anim3 6s 1; }  @keyframes anim3 {   0% {     opacity: 0;   }   49.99% {     opacity: 0;   }   50% {     opacity: 1;   }   100% {     opacity: 1;   } }  <div class="circle">   <div class="circle__item">     <div class="circle__half circle__half--clipped"></div>   </div>   <div class="circle__half circle__half--fix">   </div> </div>