랙 포커스

<div class="stage">
  <div class="subj a">A</div>
  <div class="subj b">B</div>
  <div class="ring"></div>
</div>

.stage{position:absolute;inset:0;background:linear-gradient(160deg,#20222e,#14141c)}
.subj{position:absolute;border-radius:50%;display:grid;place-items:center;font:800 20px system-ui,sans-serif;color:#fff}
.a{left:18%;top:26%;width:26vmin;aspect-ratio:1;background:#5b5bf7;animation:focusA 4.4s ease-in-out infinite}
.b{left:60%;top:42%;width:19vmin;aspect-ratio:1;background:#ff5c8a;animation:focusB 4.4s ease-in-out infinite}
@keyframes focusA{0%,38%{filter:blur(0)}50%,88%{filter:blur(9px)}100%{filter:blur(0)}}
@keyframes focusB{0%,38%{filter:blur(9px)}50%,88%{filter:blur(0)}100%{filter:blur(9px)}}
.ring{position:absolute;width:27vmin;aspect-ratio:1;border:2px solid rgba(255,255,255,.55);border-radius:50%;
  animation:track 4.4s ease-in-out infinite}
@keyframes track{
  0%,38%{left:18%;top:26%;transform:scale(1)}
  50%,88%{left:60%;top:42%;transform:scale(.72)}
  100%{left:18%;top:26%;transform:scale(1)}
}