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

#javascript #jquery #css3 #css_animation #svg_animation

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

Ответы

Ответ 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;
}

  



Ответ 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);
  }
}





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


Ответ 3

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

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

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

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

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


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


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



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

	 






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




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

	 





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

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


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






	 



  


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




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

	 



 


4 сегмента   




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