Бегающий цветной бордер

Question

Голубая полоса должна бегать по кругу при наведении. С событием hover в jquery знаком, на этом в принципе, можно не заострять внимание. Не могу сообразить, как сделать такую анимацию. P.S Предпочтительно решение на jquery.

Answer 1

.img {
  width: 150px;
  height: 150px;
  padding: 5px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
}
.img:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  transition: transform 1s linear;
  background: linear-gradient(to top, red, blue);
}
.img:hover:after {
  transform: rotate(360deg);
}
.img img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  position: relative;
  z-index: 2;
}

<div class="img">
  <img src="https://st2.depositphotos.com/1814571/6190/i/450/depositphotos_61905765-stock-photo-golden-eagle-close-up-portrait.jpg" alt="">
</div>

Answer 2

Или вот так:

* {
  box-sizing: border-box;
}
html, body {
  height: 100%;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #454372;
}
figure {
  --borderWidth: 4px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  position: relative;
  background-image: url(https://s00.yaplakal.com/pics/pics_preview/4/6/4/10101464.jpg);
  background-size: cover;
}
figure:after {
  content: '';
  position: absolute;
  top: calc(-1 * var(--borderWidth));
  left: calc(-1 * var(--borderWidth));
  height: calc(100% + var(--borderWidth) * 2);
  width: calc(100% + var(--borderWidth) * 2);
  background: linear-gradient(to top, #119d95 30%, #ffffff 70%);
  border-radius: calc(2 * var(--borderWidth));
  z-index: -1;
  -webkit-animation: anim 2s ease infinite;
          animation: anim 2s ease infinite;
  background-size: 100% 100%;
  border-radius: 50%;
}
@-webkit-keyframes anim {
  from {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes anim {
  from {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

<figure></figure>

В данном случае: используем keyframes при выполнении анимации. Чтобы она повторялась бесконечное количество раз. Ну возможно это будет инетересно.

Answer 3

Варианты решения SVG

1. Заполнение бордюра из одной средней точки до слияния концoв линии

Подробней об этой технике можно прочитать в другом топике сайта Анимация симметричного заполнения фигур из одной точки (смотрите вторую половину ответа)

Нам понадобится максимальная длина линии при радиусе равном 70px
C= 2 * 3.1415 * 70 = 439.81 Округляем до 440px

Далее будем использовать половину длины окружности - 220px Четверть - 110px

• Вариант заполнения слева направо

Анимация начинается при наведении курсора

.container {
width:100%;
height:100%;
}

<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
   width="300" height="400"    viewBox="0 0 150 200" preserveAspectRatio="xMinYMin meet" >  
 <defs>   
  <mask id="msk">
       <circle fill="white" cx="75px" cy="100px" r="70px" stroke-width="5"  stroke="black"/>
     </mask>
 </defs>
<circle fill="none" cx="75px" cy="100px" r="70px" stroke-width="5"  stroke="dodgerblue" stroke-dasharray="0 220 0 220" >
   &lt;animate
  attributeName="stroke-dasharray"
  values="0 220 0 220;0 0 440 0"
  dur="0.5s"
  begin="img1.mouseover"
  repeatCount="1"
  restart="whenNotActive"
  fill="freeze"
  /&gt; 
 &lt;animate
attributeName="stroke-dasharray"
values="0 0 440 0;0 220 0 220"
dur="0.5s"
begin="img1.mouseout"
repeatCount="1"
restart="whenNotActive"
fill="freeze"
/&gt; 
   &lt;/circle&gt;  



<image id="img1" xlink:href="https://i.stack.imgur.com/WHYc7.jpg" width="100%" height="100%"  mask="url(#msk)"/>
</svg>

</div>

• Вариант заполнения сверху вниз

.container {
width:100%;
height:100%;
}

<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
   width="300" height="400"    viewBox="0 0 150 200" preserveAspectRatio="xMinYMin meet"  >  
 <defs>   
  <mask id="msk">
       <circle fill="white" cx="75px" cy="100px" r="70px" stroke-width="5"  stroke="black"/>
     </mask>
 </defs>
<circle fill="none" cx="75px" cy="100px" r="70px" stroke-width="5"  stroke="dodgerblue" stroke-dashoffset="-110" stroke-dasharray="0 220 0 220" >
   &lt;animate
  attributeName="stroke-dasharray"
  values="0 220 0 220;0 0 440 0"
  dur="0.5s"
  begin="img1.mouseover"
  repeatCount="1"
  restart="whenNotActive"
  fill="freeze"
  /&gt; 
 &lt;animate
attributeName="stroke-dasharray"
values="0 0 440 0;0 220 0 220"
dur="0.5s"
begin="img1.mouseout"
repeatCount="1"
restart="whenNotActive"
fill="freeze"
/&gt; 
   &lt;/circle&gt;  



<image id="img1" xlink:href="https://i.stack.imgur.com/cySio.jpg" width="100%" height="100%"  mask="url(#msk)"/>
</svg>

</div>

2. Вращение 2-х и более сегментов бордюра

Подробней об этой технике можно прочитать в другом топике сайта Анимация симметричного заполнения фигур из одной точки (смотрите первую половину ответа)

• Вращение двух сегментов при наведении

<style>
.container {
width:100%;
height:100%;
}
</style>

<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
   width="300" height="400"    viewBox="0 0 150 200" preserveAspectRatio="xMinYMin meet"  >  
 <defs>   
  <mask id="msk">
       <circle fill="white" cx="75px" cy="100px" r="70px" stroke-width="5"  stroke="black"/>
     </mask>
 </defs>
<circle fill="none" cx="75px" cy="100px" r="70px" stroke-width="5"  stroke="#C700C7" stroke-dashoffset="102" stroke-dasharray="215 5" >
   &lt;animate
 &lt;animate
  attributeName="stroke-dashoffset"

values="220;0"
   dur="0.5s"
   begin="img1.mouseover"
   repeatCount="2"
   restart="whenNotActive" />
 &lt;animate
  attributeName="stroke-dashoffset"

values="0;220"
   dur="0.35s"
   begin="img1.mouseout"
   repeatCount="2"
   restart="whenNotActive" />
   &lt;/circle&gt;  



<image id="img1" xlink:href="https://i.stack.imgur.com/cySio.jpg" width="100%" height="100%"  mask="url(#msk)"/>
</svg>

</div>

• Вращение трех сегментов

.container {
width:100%;
height:100%;
}

<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
   width="300" height="400"    viewBox="0 0 150 200" preserveAspectRatio="xMinYMin meet"  >  
 <defs>   
  <mask id="msk">
       <circle fill="white" cx="75px" cy="100px" r="70px" stroke-width="5"  stroke="black"/>
     </mask>
 </defs>
<circle fill="none" cx="75px" cy="100px" r="70px" stroke-width="5"  stroke="#C700C7" stroke-dashoffset="103" stroke-dasharray="140 6.6" >
   &lt;animate

  attributeName="stroke-dashoffset"

values="146.6;0"
   dur="0.5s"
   begin="img1.mouseover"
   repeatCount="2"
   restart="whenNotActive" />
 &lt;animate
  attributeName="stroke-dashoffset"

values="0;220"
   dur="0.5s"
   begin="img1.mouseout"
   repeatCount="1"
   restart="whenNotActive" />
   &lt;/circle&gt;  



<image id="img1" xlink:href="https://i.stack.imgur.com/cySio.jpg" width="100%" height="100%"  mask="url(#msk)"/>
</svg>

</div>

• 4 сегмента

.container {
width:100%;
height:100%;
}

<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
   width="300" height="400"    viewBox="0 0 150 200" preserveAspectRatio="xMinYMin meet"  >  
 <defs>   
  <mask id="msk">
       <circle fill="white" cx="75px" cy="100px" r="70px" stroke-width="5"  stroke="black"/>
     </mask>
 </defs>
<circle fill="none" cx="75px" cy="100px" r="70px" stroke-width="5"  stroke="#C700C7" stroke-dashoffset="103" stroke-dasharray="105 5" >
 &lt;animate
  attributeName="stroke-dashoffset"

values="105;0"
   dur="0.35s"
   begin="img1.mouseover"
   repeatCount="3"
   restart="whenNotActive" />
 &lt;animate
  attributeName="stroke-dashoffset"

values="0;105"
   dur="0.35s"
   begin="img1.mouseout"
   repeatCount="2"
   restart="whenNotActive" />
   &lt;/circle&gt;  



<image id="img1" xlink:href="https://i.stack.imgur.com/cySio.jpg" width="100%" height="100%"  mask="url(#msk)"/>
</svg>

</div>