Бегущая пунктирная рамка у блока

217

22 апреля 2018, 20:17

Как сделать так, чтобы граница блока была не статичной, а бегала по направлению часовой стрелки? Понимаю, что как-то должно быть с помощью css animation... Не даётся мне это свойство никак :-(

.links_wrapper2 {
    height: 165px;
    margin: 5px 0 0;
    padding: 5px 0;
    border: dashed 1px #537098;
    border-radius: 7px;
}
<div class="links_wrapper2">Контент</div>

Answer 1

Вариант на CSS:

Смещаем background-image с помощью background-position

* { 
  margin: 0; 
  padding: 0; 
} 
 
body { 
  background-color: black; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  height: 100vh; 
} 
 
.main { 
  width: 50px; 
  height: 50px; 
  background: black; 
  background-image: linear-gradient(90deg, white 50%, transparent 50%), linear-gradient(90deg, white 50%, transparent 50%), linear-gradient(0, white 50%, transparent 50%), linear-gradient(0, white 50%, transparent 50%); 
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y; 
  background-size: 8px 3px, 8px 3px, 3px 8px, 3px 8px; 
  animation: running-contour 0.5s linear infinite; 
} 
 
@keyframes running-contour { 
  from { 
    background-position: 0 0, 8px 100%, 0 8px, 100% 0; 
  } 
  to { 
    background-position: 8px 0, 0 100%, 0 0, 100% 8px; 
  } 
}

<div class="main"></div>

Вариант на SVG:

Подобная анимация есть в этом QA — ссылка

* { 
  margin: 0; 
  padding: 0; 
} 
 
body { 
  background-color: black; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  height: 100vh; 
}

<svg width="104" height="104" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/2000/svg" version="1.1"> 
  <rect x="2" y="2" width="100" height="100" fill="none" stroke="white" stroke-width="4" stroke-dashofsset="250" stroke-dasharray="15"> 
    <animate attributeName="stroke-dashoffset" values="150;0" dur="5s" repeatCount="indefinite"/> 
  </rect> 
</svg>