폰 레스토프 효과

<div class="row" id="row"></div>
<div class="cur" id="cur">➤</div>

.row{display:flex;gap:5%;width:90%}
.dot{width:16%;aspect-ratio:1;border-radius:50%;background:var(--line);position:relative}
.dot.special{background:var(--accent-2)}
.check{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font:900 14px/1 monospace;opacity:0}
.dot.special .check{animation:show 3s ease-in-out infinite}
@keyframes show{0%,40%{opacity:0}60%,90%{opacity:1}100%{opacity:0}}
.cur{position:absolute;font-size:16px;color:var(--fg);transform:rotate(-45deg);animation:seek 3s ease-in-out infinite}
@keyframes seek{0%{left:10%;top:70%}40%{left:52%;top:44%}100%{left:52%;top:44%}}

const row = document.getElementById('row');
for (let i = 0; i < 5; i++) {
  const d = document.createElement('div');
  d.className = 'dot' + (i === 2 ? ' special' : '');
  if (i === 2) d.innerHTML = '<span class="check">✓</span>';
  row.appendChild(d);
}