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

#css #svg #анимация #css_animation

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

.links_wrapper2 {
    height: 165px;
    margin: 5px 0 0;
    padding: 5px 0;
    border: dashed 1px #537098;
    border-radius: 7px;
}

Контент

    

Ответы

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





Вариант на SVG:

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



* {
  margin: 0;
  padding: 0;
}

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