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

226
17 мая 2019, 10:40

Голубая полоса должна бегать по кругу при наведении. С событием 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" >  
	    
	      <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" 
			   />  
	    <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" 
		  />  
       </circle> 	 
	 
	 
	 <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" >  
	    
	      <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" 
			   />  
	    <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" 
		  />  
       </circle> 	 
	 
	 
	 <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" >  
	    
	      <animate 
			  <animate 
	     attributeName="stroke-dashoffset" 
		 values="220;0" 
		 dur="0.5s" 
		 begin="img1.mouseover" 
		 repeatCount="2" 
		 restart="whenNotActive" />   
		      
			  
			  <animate 
	     attributeName="stroke-dashoffset" 
		 values="0;220" 
		 dur="0.35s" 
		 begin="img1.mouseout" 
		 repeatCount="2" 
		 restart="whenNotActive" />  
			    
	     
       </circle> 	 
	 
	 
	 <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" >  
	    
	      <animate 
			  
	     attributeName="stroke-dashoffset" 
		 values="146.6;0" 
		 dur="0.5s" 
		 begin="img1.mouseover" 
		 repeatCount="2" 
		 restart="whenNotActive" />   
		      
			  
			  <animate 
	     attributeName="stroke-dashoffset" 
		 values="0;220" 
		 dur="0.5s" 
		 begin="img1.mouseout" 
		 repeatCount="1" 
		 restart="whenNotActive" />  
			    
	     
       </circle> 	 
	 
	 
	 <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" >  
	    
 
			  <animate 
	     attributeName="stroke-dashoffset" 
		 values="105;0" 
		 dur="0.35s" 
		 begin="img1.mouseover" 
		 repeatCount="3" 
		 restart="whenNotActive" />   
		      
			  
			  <animate 
	     attributeName="stroke-dashoffset" 
		 values="0;105" 
		 dur="0.35s" 
		 begin="img1.mouseout" 
		 repeatCount="2" 
		 restart="whenNotActive" />  
			    
	     
       </circle> 	 
	 
	 
	 <image id="img1" xlink:href="https://i.stack.imgur.com/cySio.jpg" width="100%" height="100%"  mask="url(#msk)"/> 
</svg>	  
</div>

READ ALSO
Как разбить код на модули?

Как разбить код на модули?

Изучаю модули javascript

222
Duplicate entry &#39;test@test.com&#39; for key &#39;users_email_unique&#39;

Duplicate entry 'test@test.com' for key 'users_email_unique'

Laravel 55 + AjaxRegister При регистрации пользователей иногда натыкаюсь на такую ошибку в логах:

131
Не могу подключиться к базе данных в IntelliJ IDEA

Не могу подключиться к базе данных в IntelliJ IDEA

Подчёркивает строчку ClassforName("com

164
MySQL: Как получить последние записи одним запросом?

MySQL: Как получить последние записи одним запросом?

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

152