CSS3は光る境界線効果を実現します

<!-- この要素は表示されません。DOM は JavaScript によって生成されます -->
<div class="root" style="display: none;">
  <div>
    <div class="サイド左"></div>
    <div class="サイドトップ"></div>
    <div class="サイド右"></div>
    <div class="サイドボトム"></div>
  </div>
</div>

体 {
  マージン: 0;
  幅：100vw;
  高さ：100vh;
  背景: #010326;
}

。根 {
  --glow_width: 2px;
  --アニメーションの長さ: 2秒;
  --遅延係数: 2;

  位置: 絶対;
  左: 50%;
  上位: 50%;
  幅: 300ピクセル;
  高さ: 300px;
  変換: 移動(-50%, -50%) 回転(45度);

/* このシステムがどのように設定されているかを確認するには、以下の行のコメントを解除してください */
/* 境界線: 1px 破線赤; */
  オーバーフロー: 非表示;
}

.サイド{
  位置: 絶対;
  上: 0;
  左: 0;
}

.サイド.左,
.サイド.右{
  幅: var(--glow_width);
  高さ: 0;
  背景: linear-gradient(下へ、透明、#c03225、透明);
  アニメーション: heightAnim var(--animation_length) 線形無限、
    ハイダーcalc(var(--delay_factor) * var(--animation_length))
      var(--animation_length) 無限;
}

.サイド.トップ、
.サイド.ボトム {
  幅: 100%;
  高さ: var(--glow_width);
  背景: linear-gradient(左、透明、#c03225、透明);
  アニメーション: widthAnim var(--animation_length) 0s 線形無限、
    ハイダーcalc(var(--delay_factor) * var(--animation_length))
      var(--animation_length) 無限;
}

.サイド.右{
  左: 自動;
  右: 0;
  高さ: 0;
  アニメーション遅延: calc(var(--animation_length) / 2);
  アニメーション方向: 通常、逆方向;
}

.サイド.ボトム {
  上:自動;
  下部: 0;
  幅: 0;
  アニメーション遅延: calc(var(--animation_length) / 2);
  アニメーション方向: 通常、逆方向;
}

@keyframes 高さアニメーション {
  0% {
    高さ: 0px;
  }
  50% {
    高さ: 300px;
    変換: 初期;
  }
  100% {
    変換: translate(0, 300px);
  }
}

@keyframes 幅アニメーション {
  0% {
    幅: 0px;
  }
  50% {
    幅: 300ピクセル;
    変換: 初期;
  }
  100% {
    変換: translate(300px, 0px);
  }
}

@keyframes 非表示 {
  0%、
  50% {
    不透明度: 0;
  }
  51%、
  100% {
    不透明度: 1;
  }
}

テンプレートを `<div class="root" style="transform: translate(-50%, -50%) rotate({{ value }})"> にします。
<div>
    <div class="サイド左"></div>
    <div class="サイドトップ"></div>
    <div class="サイド右"></div>
    <div class="サイドボトム"></div>
  </div>
</div>`

セグメントを9にする
for(let i = -セグメント; i < セグメント; i++){
  document.body.innerHTML += template.replace("{{ value }}", 90/セグメント * i + "deg")
}

// document.body.innerHTML += template.replace("{{ value }}", 90/segments * 0 + "deg")