Z 스택

<div class="wrap">
  <div class="zstack" id="zstack">
    <div class="layer l1">Base</div>
    <div class="layer l2">Badge</div>
    <div class="layer l3"></div>
  </div>
  <div class="tag" id="tag">front: Base</div>
</div>

.wrap{display:flex;flex-direction:column;align-items:center;gap:10px}
.zstack{display:grid;width:min(42vmin,190px);aspect-ratio:1;place-items:center}
.layer{grid-area:1/1;border-radius:50%;display:grid;place-items:center;font-weight:800;
  transition:transform .5s cubic-bezier(.34,1.56,.64,1),opacity .5s}
.l1{width:100%;height:100%;background:var(--surface);border:2px solid var(--line);color:var(--muted);font-size:11px}
.l2{width:52%;height:52%;background:var(--accent);color:#fff;font-size:11px}
.l3{width:80%;height:80%;border:3px dashed var(--accent-2);background:transparent}
.layer.front{transform:scale(1.12)}
.layer.back{opacity:.5}

const l1 = document.querySelector('.l1');
const l2 = document.querySelector('.l2');
const l3 = document.querySelector('.l3');
const tag = document.getElementById('tag');
const order = [
  [l1, 'Base'],
  [l3, 'Ring'],
  [l2, 'Badge'],
];
let i = 0;
function apply() {
  [l1, l2, l3].forEach((l) => l.classList.add('back'));
  const [front, name] = order[i % order.length];
  front.classList.remove('back');
  front.classList.add('front');
  setTimeout(() => front.classList.remove('front'), 480);
  tag.textContent = 'front: ' + name;
  i++;
}
apply();
setInterval(apply, 1500);