Marching Ants

<div class="nuda-bdx-march">
  <p class="nuda-bdx-march__label">Marching Ants</p>
</div>

.nuda-bdx-march {
  position: relative;
  background: #1a1a1a;
  border-radius: 10px;
  padding: 20px 28px;
  overflow: hidden;
}

.nuda-bdx-march::before,.nuda-bdx-march::after {
  content: '';
  position: absolute;
  background: #e4ff54;
}

.nuda-bdx-march::before {
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: repeating-linear-gradient(90deg,#e4ff54 0,#e4ff54 8px,transparent 8px,transparent 16px);
  animation: _nuda-bdxMarchH 1.2s linear infinite;
}

.nuda-bdx-march::after {
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: repeating-linear-gradient(90deg,#e4ff54 0,#e4ff54 8px,transparent 8px,transparent 16px);
  animation: _nuda-bdxMarchH 1.2s linear infinite reverse;
}

.nuda-bdx-march__label {
  color: #cfcfcf;
  font-size: .85rem;
  margin: 0;
  position: relative;
}

.nuda-bdx-march__label::before,.nuda-bdx-march__label::after {
  content: '';
  position: absolute;
  top: -20px;
  bottom: -20px;
  width: 2px;
  background: repeating-linear-gradient(180deg,#e4ff54 0,#e4ff54 8px,transparent 8px,transparent 16px);
  animation: _nuda-bdxMarchV 1.2s linear infinite;
}

.nuda-bdx-march__label::before {
  left: -28px;
}

.nuda-bdx-march__label::after {
  right: -28px;
  animation-direction: reverse;
}

@keyframes _nuda-bdxMarchH {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 16px 0;
  }
}

@keyframes _nuda-bdxMarchV {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 16px;
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-bdx-march::before,.nuda-bdx-march::after,.nuda-bdx-march__label::before,.nuda-bdx-march__label::after {
    animation: none;
  }
}